jQuery UI Tutorial to Show Popup Modal or Dialog Window With Custom Styles & Options in Browser

Welcome folks today in this blog post we will be showing popup modal or dialog window with custom styles and options in browser using jquery in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Dialog functionality</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>  
   </head>  
   <body>  
   
   </body>  
</html>

<!doctype html>

<head>

<title>jQuery UI Dialog functionality</title>

</head>

<body>

</body>

</html>

As you can see we are including the jquery ui library cdn for both the css and js as shown above. And now we need to add the html for the dialog modal window as shown below

<!-- HTML -->   
<div id="dialog-1" title="Blackcaps New Zealand">Kane Williamson is the Captain of NZ.</div>  
<button id="opener">Open Dialog</button>

<div id="dialog-1" title="Blackcaps New Zealand">Kane Williamson is the Captain of NZ.</div>

<button id="opener">Open Dialog</button>

And now we need to add the javascript code for showing the dialog window

$(function() {  
            $( "#dialog-1" ).dialog({  
               autoOpen: false
            });  
            $( "#opener" ).click(function() {  
               $( "#dialog-1" ).dialog( "open" );  
            });  
         });

$(function() {

$( "#dialog-1" ).dialog({

autoOpen: false

});

$( "#opener" ).click(function() {

$( "#dialog-1" ).dialog( "open" );

});

As you can see in the above code we are having the jquery onready function we are attaching the dialog window function and inside it we are making the autoOpen property to false. And then we are calling the dialog() method when the user clicks the button as shown below

And now we can customize the styles of the dialog window by adding the below lines of the css code as shown below

 <style>  
         .ui-widget-header,.ui-state-default, ui-button{  
            background:#b9cd6d;  
            border: 1px solid #b9cd6d;  
            color: #FFFFFF;  
            font-weight: bold;  
         }  
      </style>

<style>

.ui-widget-header,.ui-state-default, ui-button{

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

Adding Buttons inside Modal Window

We can even add the ok buttons inside the modal popup window as shown below

index.html

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Dialog functionality</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>  
      <!-- CSS -->  
      <style>  
         .ui-widget-header,.ui-state-default, ui-button{  
            background:lightgreen;  
            border: 1px solid #b9cd6d;  
            color: black;  
            font-weight: bold;  
         }  
      </style>  
      <!-- Javascript -->  
      <script>  
         $(function() {  
            $( "#dialog-2" ).dialog({  
               autoOpen: false,   
               buttons: {  
                  OK: function() {$(this).dialog("close");}  
               },  
               title: "Movie Title:Sholey",  
               position: {  
                  my: "left center",  
                  at: "left center"  
               }  
            });  
            $( "#opener-2" ).click(function() {  
               $( "#dialog-2" ).dialog( "open" );  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <!-- HTML -->   
      <div id="dialog-2" title="Blackcaps NZ">Kane Williamson is captain of NZ.</div>  
      <button id="opener-2">Open Dialog</button>  
   </body>  
</html>

<!doctype html>

<head>

<title>jQuery UI Dialog functionality</title>

<style>

.ui-widget-header,.ui-state-default, ui-button{

background:lightgreen;

border: 1px solid #b9cd6d;

color: black;

font-weight: bold;

}

</style>

$(function() {

$( "#dialog-2" ).dialog({

autoOpen: false,

buttons: {

OK: function() {$(this).dialog("close");}

title: "Movie Title:Sholey",

position: {

my: "left center",

at: "left center"

}

});

$( "#opener-2" ).click(function() {

$( "#dialog-2" ).dialog( "open" );

});

</script>

</head>

<body>

<div id="dialog-2" title="Blackcaps NZ">Kane Williamson is captain of NZ.</div>

<button id="opener-2">Open Dialog</button>

</body>

</html>