Create Popup window

Davina Peon

Messages:: 19

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Last week I've costumize the website which use popup. This using CSS.
insert before<head>:

<script type="text/javascript" src="js/popup.js"></script>

PHP:

Insert this to your body :

<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')">close</a>
<p>your content</p>
</div><a href="#" onclick="popup('popUpDiv')">click popup</a>

PHP:

CSS code:


/*Popup*/#blanket {   background-color:#111;   opacity: 0.65;   position:absolute;   z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/   top:0px;   left:0px;   width:100%;    -webkit-border-radius: 0.5em;        -moz-border-radius: 0.5em;        border-radius    top:50px;    left:200px;    box-shadow: 0 0 10px #222;     -webkit-box-shadow: 0 0 10px #222;     -moz-box-shadow: 0 0 10px #222;}#popUpDiv {    position: fixed;    background-color:#eeeeee;    width:300px;    height:250px;    top:150px;    left:450px;    z-index: 800; /*ooveeerrrr nine thoussaaaannnd*/    -webkit-border-radius: 0.5em;        -moz-border-radius: 0.5em;        border-radius    box-shadow: 0 0 8px #222;    -webkit-box-shadow: 0 0 8px #222;    -moz-box-shadow: 0 0 8px #222;
}

PHP:

Save Java Script file name : popup.js,

function toggle(div_id) {    var el = document.getElementById(div_id);    if ( el.style.display == 'none' ) {    el.style.display = 'block';}    else {el.style.display = 'none';}}function blanket_size(popUpDivVar) {    if (typeof window.innerWidth != 'undefined') {        viewportheight = window.innerHeight;    } else {        viewportheight = document.documentElement.clientHeight;    }    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {        blanket_height = viewportheight;    } else {        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {            blanket_height = document.body.parentNode.clientHeight;        } else {            blanket_height = document.body.parentNode.scrollHeight;        }    }    var blanket = document.getElementById('blanket');    blanket.style.height = blanket_height + 'px';    var popUpDiv = document.getElementById(popUpDivVar);    popUpDiv_height=blanket_height/2-150;//150 is half popup's height    popUpDiv.style.top = popUpDiv_height + 'px';}function window_pos(popUpDivVar) {    if (typeof window.innerWidth != 'undefined') {        viewportwidth = window.innerHeight;    } else {        viewportwidth = document.documentElement.clientHeight;    }    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {        window_width = viewportwidth;    } else {        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {            window_width = document.body.parentNode.clientWidth;        } else {            window_width = document.body.parentNode.scrollWidth;        }    }    var popUpDiv = document.getElementById(popUpDivVar);    window_width=window_width/2-150;//150 is half popup's width    popUpDiv.style.left = window_width + 'px';}function popup(windowname) {toggle('blanket');toggle(windowname);}

PHP: