Simple Awesome Inline Modal Box with CSS3

[JavaScriptBank]

Like JavaScript popup scripts ever presented on jsB@nk:

- GreyBox: Cool HTML/JavaScript/AJAX/Flash... detail (http://www.javascriptbank.com/greybox-cool-html-javascript-ajax-flash-window-popup.html) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)

http://www.javascriptbank.com/javascript.images/browser/simple-awesome-inline-modal-box-with-css3.jpg (http://www.javascriptbank.com/javascript/browser/popup/simple-awesome-inline-modal-box-with-css3/preview/en/)
Demo: JavaScript Simple Awesome Inline Modal Box with CSS3 (http://www.javascriptbank.com/simple-awesome-inline-modal-box-with-css3.html/en/)


[U]How to setup

Step 1: Place CSS below in your HEAD section
CSS
<style type="text/css">
#popup{
z-index+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}
.tit{
width:98%;
height:20px;
padding:5px;
background:#3654A8;
}
</style>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
<script type="text/javascript" language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='bloc k';
document.bgColor="silver" ;
}
else
{
document.getElementById(divId).style.display = 'none';
document.bgColor="#FFFFFF" ;
}
}
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML
<div class="body">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim volutpat sem ac scelerisque. Cras non rutrum lorem. Duis lacinia quam at leo ultrices commodo. Ut eget urna feugiat odio lobortis condimentum. Donec ultrices eros id mi bibendum feugiat. Vestibulum augue eros, ultrices id viverra at, euismod sed neque. Pellentesque non magna vitae velit venenatis condimentum. Phasellus eleifend tristique odio eget posuere. Nulla lacinia molestie quam at luctus. Vestibulum non lorem velit.</p>

<p>Nulla venenatis pretium urna. Suspendisse nisl orci, congue a gravida a, ornare id ipsum. Duis sapien nulla, congue id dictum eget, sollicitudin non nisi. Integer congue dictum augue ac fermentum. Etiam nec semper dui. Pellentesque rutrum lobortis neque in imperdiet. Donec ut lacus felis, id scelerisque nisi. Maecenas lacus erat, cursus nec facilisis non, aliquet ut felis. Aenean <a href="javascript:void(0);" onclick="return ShowHide('popup');"><b>Click Here for PopUp</b></a>. Nam sit amet magna in quam cursus porttitor. Maecenas laoreet blandit tellus, at volutpat turpis suscipit et. Maecenas tempus convallis magna. Vivamus venenatis dolor quis ligula laoreet tristique. Praesent euismod porttitor ligula, vitae iaculis quam faucibus non. Sed sagittis ullamcorper erat vel porttitor.</p>

<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla hendrerit. Quisque condimentum vestibulum cursus. Pellentesque vehicula commodo nisl, quis blandit tortor consequat sed. Praesent sed orci nisl. Donec id justo eu elit elementum convallis ac at metus. Nam quis erat ut lorem facilisis eleifend. Phasellus et velit sed nulla sodales blandit quis sed massa. Praesent suscipit auctor luctus. Praesent eleifend, est sit amet vestibulum placerat, mi erat placerat arcu, non luctus enim tellus a felis. Sed sed sapien dolor. Nulla vestibulum mattis ante, in convallis mauris tempor nec. Proin aliquam arcu eu orci luctus adipiscing. Etiam pulvinar, justo sed volutpat mattis, erat purus gravida sem, vitae pretium eros velit sit amet dolor. </p>

</div>
<div id="popup">

<div class="tit">Your Title </div>
<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla </p>
<a href="javascript:void(0);" onclick="return ShowHide('popup');">Close</a>
</div>






Command to print web page in javascript (http://www.javascriptbank.com/window-print-method.html) - Javascript Time Picker (http://www.javascriptbank.com/time-picker-with-child-window.html) - JavaScript Go To URL Box (http://www.javascriptbank.com/go-to-url.html)