Nov 10, 2018

Example of Jquery UI modal Dialog

Inside <head> of your web page, put the following:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
and

<script>
  $(function() {
    $( "#dialog-message" ).dialog({
      autoOpen: false,
      position: { my: "top", at: "top", of: window },
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
</script>
<script>
  $(document).ready(function(){
  $( "#dialog-message" ).hide();
});
</script>

Inside <body> of your page:

<div id="dialog-message" title="i88.ca">
  <p>
Visit <a href="http://i88.ca">i88.ca</a> today
  </p>
</div>

Somewhere in your web page, you open the dialog by:
$('#dialog-message').dialog( "open" );