Creating Modal Boxes Using JQuery

Here is a quick way to add modal boxes on your websites. Modal boxes or modal windows are child window that requires users interaction before they can proceed with the main window. The difference with this with usual windows is that it doesn't requires you to leave the main page when you are trying to show it. Modal boxes are useful when showing forms and alert-box-looking elements.

Adding Modal Boxes Using JQuery

1) Add the box which basically is an invisible div:

<div id="dialog" title="Basic dialog">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Note that the title determines the window's title.

2) Add the script

<script>
 $(function() {
  $( "#dialog" ).dialog();
 });
</script>

Basically, the code dialog() calls the hides/call dialog box. If you want a onclick event, you can easily set the dialog box to autoOpen:false and call dialog( "open" ) onclick event.

Which basically goes like this:

<script>
 $(function() {
  $( "#dialog" ).dialog({
   autoOpen:false,
   modal:true
  });
  
  $("#modalClick").click(function() {
   $( "#dialog" ).dialog( "open" );
  });
 });
</script>

<div id="dialog" title="Basic dialog">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<a href="javascript:;" id="modalClick" >Click Me</a>

As you may have notice, other than the autoOpen parameter, I also added modal in it. Setting this to false (which is the default), will render the box as normal floating box. Making it modal creates a shadow background behind the modal that avoids actions on the main page while the box is active.

And that's it.

Note, this requires both jquery and jquery UI Core, UI Position and UI Widget for it to function. Additional UI classes are required for specific features.