HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 บทช่วยสอน

BS4 HOME BS4 เริ่มต้น BS4 คอนเทนเนอร์ BS4 Grid Basic BS4 วิชาการพิมพ์ BS4 สี ตาราง BS4 BS4 รูปภาพ BS4 Jumbotron การแจ้งเตือน BS4 ปุ่ม BS4 กลุ่มปุ่ม BS4 ป้าย BS4 แถบความคืบหน้า BS4 BS4 Spinners BS4 การแบ่งหน้า BS4 รายการกลุ่ม การ์ด BS4 BS4 ดรอปดาวน์ BS4 ยุบ BS4 Navs BS4 Navbar แบบฟอร์ม BS4 อินพุต BS4 กลุ่มอินพุต BS4 BS4 แบบฟอร์มที่กำหนดเอง BS4 ม้าหมุน BS4 โมดอล เคล็ดลับเครื่องมือ BS4 BS4 ป๊อปโอเวอร์ BS4 ขนมปังปิ้ง BS4 Scrollspy BS4 ยูทิลิตี้ BS4 Flex ไอคอน BS4 วัตถุสื่อ BS4 ตัวกรอง BS4

Bootstrap 4 Grid

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

Bootstrap 4 อื่นๆ

เทมเพลตพื้นฐาน BS4 แบบฝึกหัด BS4 แบบทดสอบ BS4

Bootstrap 4 อ้างอิง

ทุกชั้นเรียน JS Alert ปุ่ม JS JS Carousel JS ยุบ JS Dropdown JS Modal JS Popover JS Scrollspy JS แท็บ JS Toasts JS Tooltip


Bootstrap JS Modal

❮ ก่อนหน้า ถัดไป ❯

Modal CSS Classes

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

Class Description Example
.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer
.modal-dialog-centered Centers the modal vertically and horizontally within the page
.modal-dialog-scrollable Adds a scrollbar inside the modal
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

ทริกเกอร์ Modal Via data-* Attributes

เพิ่ม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>

ทริกเกอร์ผ่าน JavaScript

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

ตัวอย่าง

$("#myModal").modal()

ตัวเลือกกิริยา

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

Name Type Default Description Try it
backdrop boolean or the string "static" true Specifies whether the modal should have a dark overlay:

  • true - dark overlay
  • false - no overlay (transparent)

If you specify the value "static", it is not possible to close the modal when clicking outside of it
keyboard boolean true Specifies whether the modal can be closed with the escape key (Esc):

  • true - the modal can be closed with Esc
  • false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when initialized

วิธีการโมดอล

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

Method Description Try it
.modal(options) Activates the content as a modal. See options above for valid values
.modal("toggle") Toggles the modal
.modal("show") Opens the modal
.modal("hide") Hides the modal

Modal Events

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

Event Description Try it
show.bs.modal Occurs when the modal is about to be shown
shown.bs.modal Occurs when the modal is fully shown (after CSS transitions have completed)
hide.bs.modal Occurs when the modal is about to be hidden
hidden.bs.modal Occurs when the modal is fully hidden (after CSS transitions have completed)

❮ ก่อนหน้า ถัดไป ❯