Master Summoner
- Joined
- Oct 9, 2008
- Messages
- 572
- Reaction score
- 14
Hi,
It's been a while since I looked into this section on RZ. Back when I fooled around with MS servers, I think many people asked for a pop-up TOS for their websites. Well, now that I've been gone for a long time and learned some stuff, I'm back with this script.
I'm only providing the basics of the pop-up, meaning that if you don't want it to show up every time you enter the page that you have been inserting it to, you need to script that part yourself, since I'm not going to do it at the moment.
You will only be needing to copy - paste (Bear in mind that I made this as a single page, which means that if you copy it into an existing script, you need to leave out a thing or two), since I've found out that Google host's jQuery libraries which is needed to run this script. The look of it is not very fancy, I didn't use much time on making it look good, but I have written some CSS for the basics to mark where things are located. Feel free to edit it, since I would think that no one would find this fancy.
Languages used: HTML, CSS and Javascript(jQuery).
Picture:
Demo:
Source:
It's been a while since I looked into this section on RZ. Back when I fooled around with MS servers, I think many people asked for a pop-up TOS for their websites. Well, now that I've been gone for a long time and learned some stuff, I'm back with this script.
I'm only providing the basics of the pop-up, meaning that if you don't want it to show up every time you enter the page that you have been inserting it to, you need to script that part yourself, since I'm not going to do it at the moment.
You will only be needing to copy - paste (Bear in mind that I made this as a single page, which means that if you copy it into an existing script, you need to leave out a thing or two), since I've found out that Google host's jQuery libraries which is needed to run this script. The look of it is not very fancy, I didn't use much time on making it look good, but I have written some CSS for the basics to mark where things are located. Feel free to edit it, since I would think that no one would find this fancy.
Languages used: HTML, CSS and Javascript(jQuery).
Picture:
You must be registered to see links
Demo:
You must be registered to see links
Source:
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <!-- loading javascript code from Google -->
<style type="text/css">
body{
background-color:black;
}
#_popUpWindow{
position:fixed;
top:10%;
left:25%;
width:400px;
background-color:blue;
border:thin solid cyan;
}
#_popUpTitleBar{
width:100%;
background-color:green;
}
#_popUpTitleTitle{
float:left;
}
#_popUpClose{
float:right;
}
#_popUpClose:hover{
color:red;
cursor:default;
}
#_popUpBody{
font-size:11px;
color:black;
margin: 5px 5px 5px 5px;
background-color:lightgray;
}
#_popUpButtons{
width:100%;
text-align:center;
}
._popUpButtonAccept,._popUpButtonDenie{
font-size:10px;
height:18px;
margin:2px 2px 2px 2px;
}
</style>
</head>
<body>
<!-- The pop up window div's -->
<div id="_popUpWindow">
<div id="_popUpTitleBar">
<div id="_popUpTitleTitle"></div>
<div id="_popUpClose" title="By Clicking this, you agree to the Terms of Service">X</div>
</div>
<div id="_popUpBody"></div>
<div id="_popUpButtons"><input type="submit" name="accept" value="I accept" class="_popUpButtonAccept" /> <input type="submit" name="denie" value="I Denie" class="_popUpButtonDenie" /></div>
</div></div>
<!-- end of div's -->
<script type="text/javascript">
google.load("jquery","1.3.2"); // loading the jquery libary
google.setOnLoadCallback(function () { // this is instead of using $(document).ready(function() { } );
//setting some variables:
var popUpTitle = "Terms of Service";
var popUpBody = "By closing this popup you agree to the fact that Andertraaks is <b>awesome</b><br />Credits goes 100% to Andertraaks of RaGEZONE.";
var allowHTML = true;
//checking if you set allowHTML to true or false (Baiscly allows html tags to be used or not)
if (allowHTML === true) {
$('#_popUpTitleTitle').html(popUpTitle);
$('#_popUpBody').html(popUpBody);
}
else if (allowHTML === false) {
$('#_popUpTitleTitle').text(popUpTitle);
$('#_popUpBody').text(popUpBody);
}
// Settin a 'function' to be able to 'close' the popup
$('#_popUpClose').click(function() {
$('#_popUpWindow').html("");
$('#_popUpWindow').css('border','none');
});
$('._popUpButtonAccept').click(function() { // this works as the same as close
$('#_popUpWindow').html("");
$('#_popUpWindow').css('border','none');
});
$('._popUpButtonDenie').click(function () {
window.location = ""; // Enter a destination where users that presses denie should be forwarded to.
});
});
//end of script
</script>
</body>
</html>
