Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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