I am using the jQuery UI dialog box.
When I click the button, a dialog box will open. When the dialog box opens, the whole body should be in a disconnected state. Like exactly how we use the popup. Therefore, I used the code below for this.
Here is the Js Fiddle Link
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(document).ready(function(e) { $("#popup").click(function(){ $( "#dialog" ).dialog(); $( ".parentDisable" ).show(); }); $(".parentDisable").click(function(){ $( "#dialog" ).dialog('close'); $( ".parentDisable" ).fadeOut(1000); }); $(".ui-button-icon-primary").click(function(){ $( "#dialog" ).dialog('close'); $( ".parentDisable" ).fadeOut(1000); }); }); </script> <style> .parentDisable{ position:fixed; top:0; left:0; background:#000; opacity:0.8; z-index:1; height:100%; width:100%;} </style> </head> <body> <div id="dialog" title="Basic dialog" style="display:none;"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <div class="parentDisable" style="display:none;"></div> <span id="popup" style="color:blue;cursor:pointer">Pop Up</span> </body> </html>
I have a problem here. When I press the button, a popup appears and the whole body is covered with a black background.
Now the user must close two types.
- By clicking on the close symbol in the popup window.
- By clicking on the side of the pop-up window (on a black background)
The second method mentioned above works fine. But in the first method, when I click on the close symbol, only POPUP gets closer and the black background remains the same.
I tried in some way. But that did not work. Please give any suggestions.
source share