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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
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
1 2 3 |
<!-- HTML --> <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
1 2 3 4 5 6 7 8 |
$(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
1 2 3 4 5 6 7 8 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!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> |