การสร้างกล่องแสดงข้อความแจ้งเตือนแบบ Modal ของ Bootstrap

วันนี้มาดูเรื่องเบาๆกันนะครับ เป็นเรื่องของการสร้าง Alert Popup แบบของ Bootstrap ซึ่งส่วนใหญ่เราจะเรียกกันว่ากล่อง Modal นั้นแหละ ซึ่งเราจะใช้ความสามารถของ Bootstrap มาช่วยงานเราอีกแล้ว

ภาพประกอบ modal bootstrap

Bootstrap มีความสามารถในการช่วยเราให้ทำงานได้ง่ายขึ้นมากๆ  อย่างการสร้างปุ่มสวยๆไว้ใช้ในเว็บเดี๋ยวนี้แค่เราเรียก class ออกมาก็ได้ปุ่มสวยๆมาใช้แล้วและอย่างการสร้าง Alert Box ขึ้นมาถ้าใช้ของ Modal จะง่ายและสวยงามอีกด้วย

ความสามารถนี้เป็นส่วนของกาใช้งาน javascript นะครับซึ่งทาง Bootstrap ไม่ได้มีแค่เพียง CSS อย่างเดียวเท่านั้น

ตัวอย่างตามภาพนี้เลย

modal from bootstrap

 

วิธีใช้งานก่อนอื่นอย่าลืมติดตั้ง Code ของทาง Twitter Bootstrap ก่อนนะครับ  บทความเรื่องการเริ่มต้นใช้งาน bootstrap จากนั้นมาดูวิธีการใช้งานกัน

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basicModal">
 Launch modal
 </button>

ตาม Code ตัวอย่างนี้เป็นการสร้างปุ่มขึ้นมาแล้วใช้ HTML attribute พิเศษเข้ามาช่วยนั้นคือ data-toggle กับ data-target ซึ่งจะช่วยให้เราสามารถระบุ attributes ให้กับทาง javascript แล้วเราก็ระบุ class ให้เป็นปุ่ม สีฟ้า ขนาดใหญ่ จะได้หน้าตาออกมาแบบนี้นะครับ

modal button

จากนั้นเราก็จะมาสร้างตัวเนื้อหา Modal กันครับ

เริ่มจากการสร้าง div ในส่วนของ class ชื่อ modal fade ก่อนเพื่อบอกว่าต่อไปนี้เป็นการทำงานของกล่องข้อความแบบนี้นะ

แล้วกำหนดชื่อของ id ให้ตรงกันกับชื่อที่เรียก data-target ครับ

จากนั้นให้ไปสร้าง

  

    

         header
    
     

         body
    
    

         footer
    
  </div>
</div>

ตามลำดับ เพียงเท่านี้เราก็จะได้กล่องข้อความแล้วครับ ให้ใส่เนื้อหาในส่วนของ body ส่วนปุ่มต่างๆใส่ตรง footer ไปแทนครับ แค่นี้ก็สามารถใช้งานได้แล้ว