ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1121
Joined: 21/05/2019 10:45 am

ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4

Postby jamepiyawat » 10/10/2019 5:20 pm

หลาย ๆ คนก็คงจะเคยเห็นป้าย popup ตามเว็บไซต์ต่าง ๆ กันมาบ้างแล้วซึ่งป้าย popup นี้ก็สามารถทำอะไรได้หลายอย่างไม่ว่าจะเป็นการแสดงข้อมูลของเว็บไซต์ให้ผู้ที่เข้ามาในเว็บไซต์เห็นก่อนเป็นอันดับแรกหรือว่าจะทำเป็นป้ายสรุปข้อมูลต่าง ๆ นั้นเองโดยในบทความนี้ก็จะมาอธิบายวิธีการทำ popup โดยใช้ class Modal ใน Bootstrap กันแต่ก่อนที่เราจะใส่โค้ดด้านล่างได้นั้นเราต้องทำการติดตั้งตัว Bootstrap เวอร์ชั่น 4 ให้เรียบร้อยก่อนนะครับถึงจะเรียกใช้ class ต่าง ๆ ของ Bootstrap ได้ถ้าท่านใดที่ยังไม่เข้าใจวิธีการเรียกใช้ Bootstrap ตรงนี้เราต้องศึกษามาก่อนนะครับ

โดยเราต้องกำหนดป้าย popup โดยใช้ class modal มาคลอบเอาไว้ และเราก็ต้องกำหนด id ให้ด้วยเพื่อให้กำหนดได้โดยในโค้ดตัวอย่างนี้ก็จะมี id ว่า exampleModal

Code: Select all

<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">&times;</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>


จากนั้นเราก็มาทำปุ่มที่จะทำให้ป้าย popup เด้งขึ้นมาเมือเราคลิกโดยให้เราใส่ #แล้วตามด้วยชื่อ id ของ popup ที่เราได้ตั้งเอาไว้โดยชื่อนี้เราก็จะใส่ลงในคำสั่ง data-target="" เหมือนกับโค้ดตัวอย่างดังนี้

Code: Select all

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>


ผลลัพธ์ที่ได้ เมือเราคลิกปุ่มเข้าไป

Selection_999(1217).png
Selection_999(1217).png (11.43 KiB) Viewed 186 times



เป็นอย่างไรกันบ้างละครับสำหรับวิธีการทำป้าย popup โดยใช้ Bootstrap ไม่ยากอย่างที่คิดเลยใช้ไหมล่ะครับแต่ก่อนที่จะใช้ป้าย popup แบบนี้ก็อย่าลืมเรียกใช้ Bootstrap เวอร์ชั่น 4 ก่อนนะครับสุดท้ายนี้ก็หวังว่าผู้ที่เข้ามาอ่านจะได้รับความรู้กันไปไม่มากก็น้อยนะครับ

แหล่งที่มา
https://getbootstrap.com/docs/4.0/components/modal/

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests