วิธีใส่ Modals Bootstrap 2.3.2

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

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

tai14
PHP Hero Member
PHP Hero Member
โพสต์: 158
ลงทะเบียนเมื่อ: 06/08/2018 10:25 am

วิธีใส่ Modals Bootstrap 2.3.2

โพสต์โดย tai14 » 22/08/2018 6:15 pm

ฺฺBootstrap คือเครื่องมือที่ช่วยในการสร้างเว็บไซต์ได้อย่างรวดเร็วและทำให้เว็บไซต์มีความสวยงามมากขึ้น ซึ่ง Bootstrap มีให้ดาวน์โหลดฟรีมากมายเราสามารถนำโค้ดไปใช้งานเพื่อตกแต่งเว็บไซต์ได้ฟรี ในบทความนี้จะเป็นการสอนวิธีนำ Bootstrap 2.3.2 เครื่องมือ Modals ที่ใช้แสดงกล่องข้อความขึ้นในหน้าเว็บเมื่อคลิกที่ปุ่ม
180822191210-28xs.jpg
180822191210-28xs.jpg (9.02 KiB) เปิดดู 66 ครั้ง

180822191242-qd07.jpg
180822191242-qd07.jpg (12 KiB) เปิดดู 66 ครั้ง


วิธีนำมาใช้งาน
1.นำโค้ดไปใส่ภายใน <body> </body>

โค้ด: เลือกทั้งหมด

 <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) เปิดดู 66 ครั้ง

180822191359-6G10.jpg
180822191359-6G10.jpg (23.18 KiB) เปิดดู 66 ครั้ง


3.เปลี่ยนชื่อส่วนหัวของกล่องข้อความ
180822191427-wL86.jpg
180822191427-wL86.jpg (12.04 KiB) เปิดดู 66 ครั้ง

180822191447-mUS2.jpg
180822191447-mUS2.jpg (23.08 KiB) เปิดดู 66 ครั้ง


4.เปลี่ยนข้อมูลที่ต้องการให้แสดงในกล่องข้อความ
180822191514-T59M.jpg
180822191514-T59M.jpg (23.26 KiB) เปิดดู 66 ครั้ง

180822191535-OIO8.jpg
180822191535-OIO8.jpg (12.17 KiB) เปิดดู 66 ครั้ง



6.เปลี่ยนชื่อปุ่มในกล่องข้อความ
180822191605-934x.jpg
180822191605-934x.jpg (12.2 KiB) เปิดดู 66 ครั้ง

180822191634-9C3t.jpg
180822191634-9C3t.jpg (22.9 KiB) เปิดดู 66 ครั้ง

180822191701-N7cx.jpg
180822191701-N7cx.jpg (12.27 KiB) เปิดดู 66 ครั้ง

180822191722-W43h.jpg
180822191722-W43h.jpg (23.18 KiB) เปิดดู 66 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน