Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You need to create a div that will be your overlay and a dialog box that contains the information you want to display to the user. When your event is triggered, use the jquery.show() to display the overlay and the dialog box. </p> <p>You could try something like this:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #fullscreen { display:none; position: fixed; z-index:500; min-height: 100%; min-width: 1024px; width: 100%; height: auto; background-color: #565656; top:0; left:0px; margin:0; padding:0; opacity: .5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; filter: alpha(opacity=50);} #myDialog {display:none;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="fullscreen"&gt;&lt;/div&gt; &lt;div id="myDialog title="My Dialog Title" &gt;&lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript&gt; $(document).ready(function () { //When the user attempts to navigate away from the current page... $(window).unload(function () { $('fullscreen').show(); $(function () { $("#myDialog ").dialog({ resizable: false, closeOnEscape: false, width: 660, modal: true, open: function (event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); }, buttons: { "OK": function () { $(this).dialog("close"); $("fullscreen").hide(); window.location = "http://mypage.com"; }, "No, thanks": function () { $(this).dialog("close"); $("fullscreen").hide(); } } }); }); }); }); }); &lt;/script&gt; &lt;/html&gt; </code></pre> <p>Then do any needed actions. If you are unfamiliar with these aspects of jQuery, I recommend taking a look at the documentation for dialogs: <a href="http://jqueryui.com/dialog/" rel="nofollow">http://jqueryui.com/dialog/</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload