Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup » Hiệu ứng popup nội mờ ảo với CSS3
URL: https://www.javascriptbank.com/simple-awesome-inline-modal-box-with-css3.html
Tương tự như các hiệu ứng tạo popup nội đã từng giới thiệu trên jsB@nk: - GreyBox: Công cụ tạo cửa sổ popup tuyệt đẹp - Cửa sổ popup tự động trượt - Popup nội với cookie - Popup luôn ở phía trênNhưng hiệu ứng này lại đơn giản hơn rất nhiều với chỉ vài dòng mã lệnh JavaScript. Rất phù hợp nếu bạn chỉ cần một popup đơn giản và làm việc hiệu quả.
Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup » Hiệu ứng popup nội mờ ảo với 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>