How to open Jquery Modal Window? (Popup with disabled parent Window)

How to open Jquery Modal Window? (Popup with disabled parent Window)

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.


<!Doctype html>
<title>How to open Jquery Modal Window?</title>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" />
<script type="text/javascript">
var tableDialog = function () {
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*/
autoOpen: true
<style type="text/css">
#tblDialog {
height:100px !important;
<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.