jqueryui: JqueryUI Dialog Box

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Dialog</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#9f7700;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
   .ui-dialog .ui-dialog-content {
    background:#444;
    border: 0 none;
    color: #fff;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   background-image:none;
    border: 1px solid #cccccc;
    color: #1c94c4;
    font-weight: bold;
}
   
   
      </style>
      
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
       
      <div id="dialog-3" title="Dialog Title goes here...">
jQuery UI Dialog box</div>
<button id="opener-3" style="background:#ddd;padding:20px;color:#fff"> Click Here</button>
   </body>
</html>

Monday 23 February 2015

JqueryUI Dialog Box

No comments:

Post a Comment