Modal Window is like a Popup but During Modal Window parent window get disabled. Many times during Application development we required a modal window. Let’s take an example I want to draw table on click of a button. In this case when user will click on create table button I need to show a modal window where user will provide number of rows & columns. Depending upon these values I need to draw a HTML table. Jquery Modal Window is a client side functionality. It can be done using Advanced Jquery.
Look at the below example here I created a modal window using Jquery. In my page I have a link “Show Modal Winodw” on click of this I am calling a Jquery function tableDialog(). Table Dialog modal window has two buttons OK & Cancel. On click event of OK button I kept blank. On cancel button event I am closing the window.
Dialog is a Jquery UI method. To tblDialog div here I am applying Jquery dialog method. By passing width, resizable, buttons & autoOpen I am configuring my modal window. In side dialog by declaring modal: true I am showing the div (tblDialog) as a modal window else it will act like a popup. For default height of my modal window I added a css class to tblDialog div.
To run this program copy the below code into a notepad file. Save it as a html file. Before run the html file make sure you are with Internet Connectivity. Because here I used CDN link for Jquery & Jquery UI libraries.
JQuery Modal Window with disabled parent Window
<!Doctype html>
<html>
<head>
<title>How to Open JQuery Modal Popup?</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
var tableDialog = function () {
$("#tblDialog").dialog({
dialogClass: "no-close",
resizable: false,
width: "540px",
modal: true,
buttons: [{
text: "Ok",
click: function () {
/*Write Code for OK button*/
}
}, {
text: "Cancel",
click: function () {
/*On click of close button closing dialog*/
$(this).dialog("close");
}
}],
autoOpen: true
});
};
</script>
<style type="text/css">
#tblDialog {
height:100px !important;
}
</style>
</head>
<body>
<div id="links">
<a onclick="tableDialog();">Show Modal Window</a>
<div id="tblDialog" title="Jquery Modal Window" style="display: none;">
This is a Sample Modal Window using Jquery.
</div>
</div></div>
</body>
</html>
