โดยเราต้องกำหนดป้าย popup โดยใช้ class modal มาคลอบเอาไว้ และเราก็ต้องกำหนด id ให้ด้วยเพื่อให้กำหนดได้โดยในโค้ดตัวอย่างนี้ก็จะมี id ว่า exampleModal
โค้ด: เลือกทั้งหมด
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
โค้ด: เลือกทั้งหมด
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
เป็นอย่างไรกันบ้างละครับสำหรับวิธีการทำป้าย popup โดยใช้ Bootstrap ไม่ยากอย่างที่คิดเลยใช้ไหมล่ะครับแต่ก่อนที่จะใช้ป้าย popup แบบนี้ก็อย่าลืมเรียกใช้ Bootstrap เวอร์ชั่น 4 ก่อนนะครับสุดท้ายนี้ก็หวังว่าผู้ที่เข้ามาอ่านจะได้รับความรู้กันไปไม่มากก็น้อยนะครับ
แหล่งที่มา
https://getbootstrap.com/docs/4.0/components/modal/