This nifty jQuery Alert Dialogs script written by Cory S.N. LaViska (http://abeautifulsite.net) allows you to place a moveable jQuery popup box when the window loads. The popup has two buttons asking the user to either click an Agree or Cancel button to proceed. This popup alert box can be handy when you want your website visitors to agree to your Terms & Conditions or Privacy Policy before viewing a particular webpage. If the user clicks Accept, a cookie named MyCookie is saved so the popup will no longer show. Whenever the page is accessed, the cookie is checked and if the cookie does not exist, the popup will appear.
Installation Instructions
Firstly download the confirmation-alert-box-with-cookie.zip file (contains three JavaScript files) and upload the files to your JavaScript (js) folder on your server. Then create a new JavaScript & CSS Toolbox block and call it something like Confirmation Alert Box – JavaScript. Copy and paste the below JavaScript code and enter the relevant information such as URL to the JavaScript files, and the escape URL when the user does not accept the agreement and therefore clicks Cancel. You can also enter the URL to the Terms & Conditions page as well as the Privacy Policy page. When you are happy with the URLs, just click the Save Changes button.
Next create a new JavaScript & CSS Toolbox block calling it Confirmation Alert Box – CSS. Copy and paste the CSS code (shown below) into your new code block, customise the CSS code until your heart’s content, and click the Save Changes button.
Last but not least, you need to assign the page that this code will affect. You can test the function on any page or all pages if you wish. Make sure you again click the Save Changes or Save All Changes button.
Download: confirmation-alert-box-with-cookie.zip
The JavaScript Code
<script src="ENTER URL TO FILE jquery.ui.js" type="text/javascript"></script>
<script src="ENTER URL TO FILE jquery.alerts.js" type="text/javascript"></script>
<script src="ENTER URL TO FILE cookie.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.alerts.okButton = 'I accept';
window.onload = function () {
var cookie = readCookie('MyCookie')
if (cookie) {
return;
} else jConfirm('To view this webpage, you must accept our <a href="ENTER TERMS & CONDITIONS URL" title="Terms and Conditions">Terms and Conditions</a> and <a href="ENTER PRIVACY POLICY URL" title="Privacy Policy">Privacy Policy</a>.', 'Please Accept', function (r) {
if (r == true) {
createCookie('MyCookie', 'Accept', 1)
return false;
} else {
location.href = 'ENTER REDIRECT URL WHEN CANCELLED';
}
});
};
})(jQuery);
</script>
The CSS Code
<style type="text/css">
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px;
/* Dialog will be no smaller than this */
max-width: 600px;
/* Dialog will wrap after this width */
background: #fff;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #777;
background: #ccc url() top repeat-x;
border: solid 1px #fff;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat;
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url();
}
#popup_content.confirm {
//background-image: url();
background-image: none;
}
#popup_content.prompt {
background-image: url();
}
#popup_message {
// padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
