อันดับแรกเราจำเป็นจะต้องโหลอ Modal bootstrap มาก่อนเพื่อจะได้เป็นหน้าต่าง popup ให้กับเรา
สามารถโหลด Modal ได้ที่ https://getbootstrap.com/2.3.2/javascript.html#modals
ทีนี้เราก็จะได้ Modal ที่เป็นปุ่มมาเราต้องคลิกเอาถึงจะขึ้นหน้าต่างขึ้นมาแล้วเราจะทำยังไงจะให้เรามันสามารถแสดงได้อัตโมมัติล่ะเราก็จะให้ใช้ jQuery(document).ready(function() นั้นเอง
โค้ดก็จะเป็นแบบนี้
โค้ด: เลือกทั้งหมด
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#myModal").modal('show');
});
</script>
<!-- modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-md"> <!-- กำหนดขนาดของ modal เพิ่มได้นะครับ เช่น xs, sm, md, lg -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<center><p>Popup แจ้งเตือนต่าง ๆ </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
เป็นอย่างไรกันบ้างครับสำหรับโมดูลจุมล่า popup ไม่ยากเลยใช้ไหมล่ะครับก็อย่าลืมนำโค้ดนี้ไปแก้ไขหรือพัฒนาต่อกันด้วยนะครับสามารถประยุกได้หลายอย่างเลยทั้งเป็นแบบฟอมให้ผู้ใช้กรอกหรือจะทำเป็น popup รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ