Make a content x alert with jQuery






In this tutorial we will see how to create a content x alert before entering a site.

This notice will include the standards to be accepted to enter the site and accept button and a cancel button. The message is displayed once a user always has been accepted.

alert content x

You can view a live demo clicking here

We will use cookies created with javascript. In this tutorial we will not use php.

Step 1 – Import jQuery
The first thing to do is to import jquery. We can do so using the Poster

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>

Step 2 – code.js
We create a code.js file containing the following code:

$( document ).ready(function() {
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function deleteCookie(nombre) {
createCookie(nombre,””,-1);
}
if (readCookie(“advice”) == null) {

$( “body” ).append( “<div id=’float’ class=’float’><br/><br/><br/><br/><br/><center><h3>CONTENT X ALERT</h3><br/><div class=’textx’>This site is exclusively for mature age and warned the public in accordance with all current regulations. Containing text, pictures and videos classified as X, which may be found offensive.<br/></div></center> <br/><center><button id=’acceptbuttom’ class=’green’>Accept</button> – <button id=’cancelbottom’ class=’blue’>Dismiss</button></center></div>” );

}
$( “#acceptbuttom” ).click(function() {
createCookie(“advice”,12,99999);
$( “#float” ).remove();
});

$( “#cancelbottom” ).click(function() {
window.location=”http://google.es”;
});
$( “#deletecookie” ).click(function() {
deleteCookie(“advice”);
window.location=”http://ajax101.com/examples/alertx/”;
});

});

Step 3 – styles
As for the style sheet, I will use these:

.float{
background : #ebe9db url(http://1.bp.blogspot.com/-2yybWunTSWs/U8AOlL1jYyI/AAAAAAAAiP8/gU336FRhi4E/s1600/bg1.png) repeat;
position: absolute;
color:#fff;
top:0;
left: 10px;
border: 1px solid #CCC;
width:100%;
height:100%;
font-family : Verdana;
font-size : 80%;
line-height : 1.5;
}

.textx{
width:600px;
font-family : Verdana;
font-size : 100%;
}

button,
.button {
display : inline-block;
cursor : pointer;

border-style : solid;
border-width : 1px;
border-radius : 50px;
padding : 10px 18px;
box-shadow : 0 1px 4px rgba(0,0,0,.6);
font-size : 9.5pt;
font-weight : bold;
color : #fff;
text-shadow : 0 1px 3px rgba(0,0,0,.4);
font-family : sans-serif;
text-decoration : none;
}
.green {
border-color: #8fc800;
background: #8fc800;
background: -moz-linear-gradient(top, #8fc800 0%, #438c00 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#8fc800), color-stop(100%,#438c00));
background: -webkit-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: -o-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: -ms-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: linear-gradient(top, #8fc800 0%,#438c00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=’#8fc800′, endColorstr=’#438c00′,GradientType=0 );
}

.blue {
border-color : #2989d8;
background: #2989d8;
background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#2989d8), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: linear-gradient(top, #2989d8 0%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=’#2989d8′, endColorstr=’#1e5799′,GradientType=0 );
}

You can download the sample files clicking here




 
Leave a Comment
Your comment: