วิธีใส่ Modals Bootstrap 2.3.2

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

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

tai14
PHP Super Member
PHP Super Member
Posts: 356
Joined: 06/08/2018 10:25 am

วิธีใส่ Modals Bootstrap 2.3.2

Post by tai14 » 22/08/2018 6:15 pm

ฺฺBootstrap คือเครื่องมือที่ช่วยในการสร้างเว็บไซต์ได้อย่างรวดเร็วและทำให้เว็บไซต์มีความสวยงามมากขึ้น ซึ่ง Bootstrap มีให้ดาวน์โหลดฟรีมากมายเราสามารถนำโค้ดไปใช้งานเพื่อตกแต่งเว็บไซต์ได้ฟรี ในบทความนี้จะเป็นการสอนวิธีนำ Bootstrap 2.3.2 เครื่องมือ Modals ที่ใช้แสดงกล่องข้อความขึ้นในหน้าเว็บเมื่อคลิกที่ปุ่ม
180822191210-28xs.jpg
180822191210-28xs.jpg (9.02 KiB) Viewed 2152 times
180822191242-qd07.jpg
180822191242-qd07.jpg (12 KiB) Viewed 2152 times
วิธีนำมาใช้งาน
1.นำโค้ดไปใส่ภายใน <body> </body>

Code: Select all

 <a href="#myModal" role="button" class="btn" data-toggle="modal">Click</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">MindPHP</h3>
  </div>
  <div class="modal-body">
    <p>Hello</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
2.เปลี่ยนชื่อปุ่มที่ใช้คลิกก่อนแสดงกล่องข้อความ
180822191338-v854.jpg
180822191338-v854.jpg (9.05 KiB) Viewed 2152 times
180822191359-6G10.jpg
180822191359-6G10.jpg (23.18 KiB) Viewed 2152 times
3.เปลี่ยนชื่อส่วนหัวของกล่องข้อความ
180822191427-wL86.jpg
180822191427-wL86.jpg (12.04 KiB) Viewed 2152 times
180822191447-mUS2.jpg
180822191447-mUS2.jpg (23.08 KiB) Viewed 2152 times
4.เปลี่ยนข้อมูลที่ต้องการให้แสดงในกล่องข้อความ
180822191514-T59M.jpg
180822191514-T59M.jpg (23.26 KiB) Viewed 2152 times
180822191535-OIO8.jpg
180822191535-OIO8.jpg (12.17 KiB) Viewed 2152 times

6.เปลี่ยนชื่อปุ่มในกล่องข้อความ
180822191605-934x.jpg
180822191605-934x.jpg (12.2 KiB) Viewed 2152 times
180822191634-9C3t.jpg
180822191634-9C3t.jpg (22.9 KiB) Viewed 2152 times
180822191701-N7cx.jpg
180822191701-N7cx.jpg (12.27 KiB) Viewed 2152 times
180822191722-W43h.jpg
180822191722-W43h.jpg (23.18 KiB) Viewed 2152 times

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 1 guest