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>
ลองตัวเอง» ทริกเกอร์ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
ตัวเลือก Modal
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ data-backdrop=""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ | ลองมัน |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | ระบุว่ากิริยาควรมีการซ้อนทับสีเข้ม:
ถ้าคุณระบุค่า "static" มันเป็นไปไม่ได้ที่จะปิดกิริยาเมื่อคลิกนอกของมัน | ใช้ JS การใช้ข้อมูล |
| keyboard | boolean | true | ระบุว่ากิริยาที่สามารถปิดด้วยปุ่ม Escape (Esc) :
| ใช้ JS การใช้ข้อมูล |
| show | boolean | true | ระบุว่าจะแสดงกิริยาเมื่อเริ่มต้น | ใช้ 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">×</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> ลองตัวเอง»