Full version: jsB@nk » Browser » Popup » Simple Awesome Inline Modal Box with CSS3
URL: https://www.javascriptbank.com/simple-awesome-inline-modal-box-with-css3.html
Like JavaScript popup scripts ever presented on jsB@nk: - GreyBox: Cool HTML/JavaScript/AJAX/Flash Window Popup - DIV Layer Popup onClick - Inner Popup with Cookie - Always on Top PopupHowever this JavaScript code example is simpler to make an inner popup. Tallying with simple layouts of web design or you would not like to edit/use a lot of JavaScript code examples on the web pages.
Full version: jsB@nk » Browser » Popup » Simple Awesome Inline Modal Box with CSS3
URL: https://www.javascriptbank.com/simple-awesome-inline-modal-box-with-css3.html
<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><script type="text/javascript" language="JavaScript">function ShowHide(divId){if(document.getElementById(divId).style.display == 'none'){ document.getElementById(divId).style.display='block'; document.bgColor="silver" ;}else{ document.getElementById(divId).style.display = 'none'; document.bgColor="#FFFFFF" ;}}</script><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>