There may be a page on your web site that you want to protect by forcing visitors to read a disclaimer or accept terms and conditions before viewing the page contents. This is entirely possible with the jQuery JavaScript library along with jQuery UI, the user interface library that goes along with the jQuery core library.
The Page
The page contains the usual head and body sections. The interactivity of the page to make the web site visitor accept the terms and conditions is made possible by using the jQuery and jQueryUI JavaScript libraries.
Head section
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui /1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui /1.8.2/jquery-ui.js"></script>
</head>
The jQuery and jQueryUI libraries are included in the head section, like any other external JavaScripr file reference. In this example the files are included from jquery.com. It is easy to download the jQuery and jQuery UI files and reference them locally.
Body Section
<body>
<div id="dialog-confirm" title="Terms and Conditions">
<p>Access to and use of this site is subject to the Terms and Conditions listed below.</p>
More legal-ese...
</div>
<div>
<p>
The content of the page goes here, just like any other page.
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$( "#dialog-confirm" ).dialog({
buttons: {
"I agree": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
window.location.replace
("http://www.webtechnologyinc.com");
}
},
closeOnEscape: false,
draggable: false,
height: ($(window).height()) * 0.8,
modal: true,
open: function(event, ui) {
// Set opacity of parent window
$( ".ui-widget-overlay" ).css( "opacity", 0.90 );
// Hide close button on modal dialog
$( ".ui-dialog-titlebar-close" ).css( "display", 'none' );
},
resizable: false,
width: ($(window).width()) * 0.7
});
});
</script>
</body>
The body contains a section containing the text of the terms and conditions. This is what shows in the jQuery dialog box that is presented to web site visitors before they can view the page contents. The terms and conditions are contained in the following code snippet.
<div id="dialog-confirm" title="Terms and Conditions">
<p>Access to and use of this site is subject to the Terms and Conditions listed below.</p>
More legal-ese...
</div>
The dialog-confirm id on the opening div element uniquely identifies the element and its contents for the jQuery dialog to show when the page is loaded.
The title attribute on the div element is used by the jQuery dialog as the heading.
Lastly, in the JavaScript code at the bottom of the body section, note the id is used to assign behaviors to the div element associated with that id.
$( "#dialog-confirm" ).dialog
The buttons options contains all the buttons that will show in the popup dialog box.
All the other options (closeOnEscape, draggalbe, etc.) on the jQueryUI dialog widget can be found in the jQeuryUI dialog API doucmentation.