How to create a jQuery modal message window that pops up on initial page load.

Okay, it took me FOREVER to finally figure out how to do this, so I decided to post it here to help others. That’s just the kind of guy I am.

This “jQuery Dialog-Message” example is taken from the jQuery UI website. It basically pops up a modal window that says whatever you want it to, and then requires a click to dismiss it. It’s perfect for legal disclaimers or anything you want people to read before they access your site.

First, you need to add jQuery itself to your site, so go here and do a “Save as” to download the jQuery v1.8.3 file.

Then, jQuery apparently needs a CSS file (for some reason), so go here and do a “Save as” to download it.

Next, you need to download the jQuery User Interface (or UI), so go here and do a “Save as” to download the jQuery UI file.

Naturally, it has its own CSS file which you can find here, doing a “Save as” to download it.

Finally, you need the jQuery Cookie code, which is located here. Download the jQuery Cookie zip master package (look for the little “ZIP” icon and click on it). Once downloaded and unzipped, you should have a folder named “jquery-cookie-master.”

Put all those files (and folder) into a NEW folder you create on your web hosting server and name it something like “modal” or whatever — it doesn’t have to be placed at your domain root or anything, just needs to be accessible.

Finally, cut and paste this code in-between your HEAD tags in your HTML file.

<!--MODAL BOX ONLOAD + COOKIE-->
<script src="http://www.yourdomain.com/yourpathto/jquery-1.8.3.js"></script>
<script src="www.yourdomain.com/yourpathto/modal/jquery-ui.js"></script>
<script src="www.yourdomain.com/yourpathto/modal/jquery-cookie-master/jquery.cookie.js"></script>
	<link rel="stylesheet" href="http://www.yourdomain.com/modal/jquery-ui.css" />
	<link rel="stylesheet" href="http://www.yourdomain.com/modal/style.css" />
	<script>
	$(function() {
    	// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    	$( "#dialog:ui-dialog" ).dialog( "destroy" );
    	if ($.cookie('showDialog') == undefined || $.cookie('showDialog') == null || $.cookie('showDialog') != 'false') {
        $( "#dialog-message" ).dialog({
            modal: true,
            buttons:{ "OK": function() { $(this).dialog("close"); $.cookie('showDialog', 'false', { expires: 3650 });  } },
            draggable: false,
            resizable: false
        });
    	}    
});
	</script>
<!--MODAL BOX ONLOAD + COOKIE-->

Lastly, cut and paste this code at the bottom of your HTML file (but ABOVE the body end tag).

<!--PUT MODAL BOX COPY ABOVE 'BODY' END TAG -->
<div id="dialog-message" title="TITLEBAR COPY">
<p><span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0;"></span>As much text as you want goes here. As much text as you want goes here. As much text as you want goes here. As much text as you want goes here. As much text as you want goes here.</p>
</div>
<!--MODAL BOX ONLOAD-->

That’s it! Boom, and you’re done! Unless the text is visible at the bottom of the page, in which case you have to add the following CSS to the jQuery UI “style.css” file:

#dialog-message {
	display: none;
	}