การใช้งานรูปแบบ Lightbox

Lightbox เป็นรูปแบบที่ใช้กันแพร่หลาย ลักษณะคือเปิดขึ้นมาจะมีพื้นหลังเป็นสีดำจางๆ แล้วตรงกลางหน้าจอจะเป็น Ad หรือ เป็นเนื้อหาพิเศษที่ต้องการนำเสนอ

สคริป Javascript ที่ต้องใช้

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://uptoyou.life/assets/js/ad-lightbox-1.min.js"></script>

Lightbox

การวาง Script ใน Page ในส่วนล่างเป็น Javascript อาจนำไปใส่ใน ad หรือเนื้อหาก็ได้เพื่อความสะดวกในการใช้งาน

<div id="{name}">
    // ad
</div>

<script>
    var lightbox = new AdLightbox("{name}");
    lightbox.setup();
</script>

การวาง Script ใน Ad

// เมื่อต้องการให้เปิด ให้เรียกใช้ฟังชั่นนี้
 lightbox.open();

* ในตัวอย่างผมทำให้แสดงครั้งเดียวเพราะต้องการลบทิ้ง หากต้องการแสดงหลายๆครั้งก็ให้เปลี่ยนสคริปใน Javascript จาก remove เป็น display none แทนได้ครับ