ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap JS Modal


JS Modal (modal.js)

ปลั๊กอิน Modal เป็นกล่องโต้ตอบ / หน้าต่างป๊อปอัพที่แสดงอยู่ด้านบนของหน้าปัจจุบัน

สำหรับการสอนเกี่ยวกับ Modals อ่านของเรา Bootstrap Modal กวดวิชา


เรียน Modal ปลั๊กอิน

ชั้น ลักษณะ
.modal สร้างกิริยา
.modal-content ลักษณะกิริยาอย่างถูกต้องกับเส้นขอบสีพื้นหลัง, ฯลฯ ใช้ระดับนี้เพื่อเพิ่มกิริยาของส่วนหัวลำตัวและส่วนท้าย
.modal-header ได้กำหนดรูปแบบของส่วนหัวของกิริยาที่
.modal-body กำหนดรูปแบบสำหรับร่างกายของกิริยาที่
.modal-footer ได้กำหนดรูปแบบสำหรับท้ายกระดาษในกิริยาที่ หมายเหตุ: บริเวณนี้เป็นที่จัดชิดขวาโดยค่าเริ่มต้น การเปลี่ยนแปลงนี้เขียนทับ CSS กับ text-align: ซ้าย | ศูนย์
.modal-sm ระบุคำกริยาขนาดเล็ก
.modal-lg ระบุคำกริยาที่มีขนาดใหญ่
.fade เพิ่มผลภาพเคลื่อนไหว / การเปลี่ยนแปลงซึ่งจางหายกิริยาทั้งในและนอก

เรียก Modal Via data-* แอตทริบิวต์

เพิ่ม data-toggle="modal" และ data-target="#modalID" องค์ประกอบใด ๆ

หมายเหตุ: สำหรับ <a> องค์ประกอบละเว้น data-target และใช้ href="#modalID" แทน:

ตัวอย่าง

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
ลองตัวเอง»

ทริกเกอร์ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

ตัวอย่าง

$("#myModal").modal()
ลองตัวเอง»

ตัวเลือก Modal

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ data-backdrop=""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ ลองมัน
backdropboolean or the string "static"true ระบุว่ากิริยาควรมีการซ้อนทับสีเข้ม:

  • true - ซ้อนทับสีเข้ม
  • false - ไม่ซ้อนทับ (โปร่งใส)

ถ้าคุณระบุค่า "static" มันเป็นไปไม่ได้ที่จะปิดกิริยาเมื่อคลิกนอกของมัน

ใช้ JS การใช้ข้อมูล
keyboardbooleantrue ระบุว่ากิริยาที่สามารถปิดด้วยปุ่ม Escape (Esc) :

  • true - กิริยาที่สามารถปิดด้วย Esc
  • false - กิริยาที่ไม่สามารถปิดด้วย Esc
ใช้ JS การใช้ข้อมูล
showbooleantrue ระบุว่าจะแสดงกิริยาเมื่อเริ่มต้น ใช้ JS การใช้ข้อมูล

วิธี Modal

ตารางต่อไปนี้แสดงวิธีการคำกริยาที่มีอยู่ทั้งหมด

วิธี ลักษณะ ลองมัน
.modal( options ) เปิดใช้งานเนื้อหาเป็นคำกริยา ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง ลองมัน
.modal("toggle") สลับกิริยา ลองมัน
.modal("show") เปิดกิริยา ลองมัน
.modal("hide") ซ่อนกิริยา ลองมัน

เหตุการณ์ Modal

ตารางต่อไปนี้แสดงกิริยาเหตุการณ์ที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
show.bs.modal เกิดขึ้นเมื่อกิริยาเป็นเรื่องเกี่ยวกับที่จะแสดง ลองมัน
shown.bs.modal เกิดขึ้นเมื่อคำกริยาจะแสดงอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน
hide.bs.modal เกิดขึ้นเมื่อกิริยาเป็นเรื่องเกี่ยวกับที่จะถูกซ่อนไว้ ลองมัน
hidden.bs.modal เกิดขึ้นเมื่อคำกริยาจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน

ตัวอย่าง

ตัวอย่าง

เข้าสู่ระบบ Modal

ตัวอย่างต่อไปนี้สร้างกิริยาสำหรับการเข้าสู่ระบบ:

ตัวอย่าง

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
            <button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
ลองตัวเอง»