[GET] Lock Content Script

***GreenSpider*** · (This post was last modified: 08-13-2011 06:45 PM by GreenSpider.)

CEO;3953 Wrote:I wanted to keep it as simple as possible.

You can put what ever HTML you like inside the lightbox.
Content of the light box must be in the var lightDivHTML

Want to change the size of the lightbox locate this line:
divLight.style.cssText and alter the CSS.

Save this file as lock.js and put it in your root of your website.

Code:

var lightDivHTML = '<a href="javascript:void(0)" onclick="closeDiv();">Close</a><br /><br />This is your first visit. Hope you will enjoy it.<br />'; initDivs(); popUP(); function popUP() { var light = document.getElementById('light'); var fader = document.getElementById('fade'); var arrayPageSize = getPageSize(); light.style.display='block'; fader.style.height = (arrayPageSize[1] + 'px'); fader.style.display = 'block'; } //Init divs function initDivs() { //Lightbox var divLight = document.createElement("div"); divLight.id = "light"; divLight.style.cssText = "display: none;position: absolute;top: 150px;left: 350px;width: 400px;height: 250px;padding: 16px;border: none;background-color: white;overflow: auto;z-index:2;"; divLight.innerHTML = lightDivHTML; document.body.appendChild(divLight); //Shadow var divFade = document.createElement("div"); divFade.id = "fade"; divFade.style.cssText = "display: none;position: absolute;top: 0px;left: 0px;width: 100%;background-color: black;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);"; document.body.appendChild(divFade); } function getPageSize(){ var xScroll, yScroll; if (window.innerHeight and& window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement and& document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } //Close function function closeDiv() { light.style.display= 'none'; fade.style.display = 'none'; }[/HTML] Your website you want to lock down - just include a reference to lock.js just above </body> like this short example: [HTML]<html> <body> Here is your website or blog <script src="lock.js" type="text/javascript"></script> </body> </html>

Ninja Style

***Zw33t2u*** · 11-11-2011, 07:32 PM

i will try it, thanks

***pkfarnv*** · 04-08-2012, 03:32 AM

Nice tutorial...thanks for sharing this wonderful one.