Source

โมดอล

ใช้ปลั๊กอินโมดอล JavaScript ของ Bootstrap เพื่อเพิ่มกล่องโต้ตอบให้กับไซต์ของคุณสำหรับไลท์บ็อกซ์ การแจ้งเตือนผู้ใช้ หรือเนื้อหาที่กำหนดเองทั้งหมด

มันทำงานอย่างไร

ก่อนเริ่มต้นใช้งานคอมโพเนนต์โมดอลของ Bootstrap โปรดอ่านข้อมูลต่อไปนี้เนื่องจากตัวเลือกเมนูของเราเพิ่งมีการเปลี่ยนแปลง

  • Modals ถูกสร้างขึ้นด้วย HTML, CSS และ JavaScript โดยจะวางตำแหน่งไว้เหนือสิ่งอื่นใดในเอกสารและเอาการเลื่อนออกจาก<body>เพื่อให้เนื้อหาโมดอลเลื่อนแทน
  • การคลิกที่โมดอล “ฉากหลัง” จะเป็นการปิดโมดอลโดยอัตโนมัติ
  • Bootstrap รองรับหน้าต่างโมดอลได้ครั้งละหนึ่งหน้าต่างเท่านั้น ไม่รองรับโมดอลที่ซ้อนกัน เนื่องจากเราเชื่อว่าโมดอลเหล่านี้เป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้
  • Modals use position: fixedซึ่งบางครั้งอาจมีความเฉพาะเจาะจงเล็กน้อยเกี่ยวกับการเรนเดอร์ของมัน เมื่อใดก็ตามที่เป็นไปได้ ให้วางโมดอล HTML ของคุณในตำแหน่งระดับบนสุดเพื่อหลีกเลี่ยงการรบกวนที่อาจเกิดขึ้นจากองค์ประกอบอื่นๆ คุณอาจพบปัญหาเมื่อวางซ้อน.modalภายในองค์ประกอบคงที่อื่น
  • อีกครั้งเนื่องจากposition: fixedมีข้อแม้บางประการเกี่ยวกับการใช้โมดอลบนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเราสำหรับรายละเอียด
  • เนื่องจาก HTML5 กำหนดความหมายของมันแอตทริบิวต์autofocusHTMLจึงไม่มีผลใน Bootstrap modals เพื่อให้ได้ผลเช่นเดียวกัน ให้ใช้ JavaScript ที่กำหนดเอง:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

อ่านต่อเพื่อการสาธิตและแนวทางการใช้งาน

ตัวอย่าง

ด้านล่างนี้เป็น ตัวอย่างโมดอล แบบคงที่ (หมายถึงpositionและdisplayถูกแทนที่แล้ว) รวมเป็นส่วนหัวโมดอล เนื้อหาโมดอล (จำเป็นสำหรับpadding) และส่วนท้ายโมดอล (ทางเลือก) เราขอให้คุณรวมส่วนหัวที่เป็นโมดอลพร้อมการดำเนินการยกเลิกเมื่อทำได้ หรือจัดเตรียมการดำเนินการปิดที่ชัดเจนอีกรายการหนึ่ง

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

สาธิตสด

สลับการสาธิตกิริยาที่ใช้งานได้โดยคลิกปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

เลื่อนเนื้อหายาว

เมื่อโมดอลยาวเกินไปสำหรับวิวพอร์ตหรืออุปกรณ์ของผู้ใช้ พวกมันจะเลื่อนโดยไม่ขึ้นกับหน้า ลองใช้การสาธิตด้านล่างเพื่อดูว่าเราหมายถึงอะไร

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

กึ่งกลางแนวตั้ง

เพิ่ม.modal-dialog-centeredเพื่อ.modal-dialogจัดกึ่งกลางโมดอลในแนวตั้ง

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

เคล็ดลับเครื่องมือและป๊อปโอเวอร์

คำแนะนำเครื่องมือและ ป๊อป โอเวอร์สามารถวางไว้ภายในโมดอลได้ตามต้องการ เมื่อปิดโมดอล คำแนะนำเครื่องมือและป๊อปโอเวอร์ภายในจะถูกปิดโดยอัตโนมัติด้วย

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

การใช้กริด

ใช้ระบบกริด Bootstrap ภายในโมดอลโดยซ้อน.container-fluidภายในไฟล์.modal-body. จากนั้น ใช้คลาสระบบกริดปกติเหมือนที่อื่น

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

เนื้อหากิริยาที่แตกต่างกัน

มีปุ่มมากมายที่เรียกใช้ modal เดียวกันโดยมีเนื้อหาต่างกันเล็กน้อยหรือไม่? ใช้event.relatedTargetและแอตทริบิวต์HTMLdata-* (อาจใช้ jQuery ) เพื่อเปลี่ยนแปลงเนื้อหาของโมดอลขึ้นอยู่กับว่าคลิกปุ่มใด

ด้านล่างนี้เป็นการสาธิตสด ตามด้วยตัวอย่าง HTML และ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดอ่านเอกสารเหตุการณ์โมดอลสำหรับรายละเอียดเกี่ยวrelatedTargetกับ

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ลบแอนิเมชั่น

สำหรับโมดอลที่ปรากฏแทนที่จะดูจางๆ ให้ลบ.fadeคลาสออกจากมาร์กอัปโมดอลของคุณ

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ความสูงแบบไดนามิก

หากความสูงของโมดอลเปลี่ยนแปลงในขณะที่เปิดอยู่ คุณควรโทร$('#myModal').modal('handleUpdate')เพื่อปรับตำแหน่งของโมดอลใหม่ในกรณีที่แถบเลื่อนปรากฏขึ้น

การเข้าถึง

อย่าลืมเพิ่มrole="dialog"และaria-labelledby="..."อ้างอิงชื่อโมดอล ถึง.modalและrole="document"ตัว.modal-dialogมันเอง นอกจากนี้ คุณอาจให้คำอธิบายของกล่องโต้ตอบโมดอลของคุณด้วยaria-describedbyon.modal

การฝังวิดีโอ YouTube

การฝังวิดีโอ YouTube ใน modals ต้องใช้ JavaScript เพิ่มเติมที่ไม่อยู่ใน Bootstrap เพื่อหยุดเล่นโดยอัตโนมัติและอีกมากมาย ดูโพสต์ Stack Overflow ที่เป็นประโยชน์สำหรับข้อมูลเพิ่มเติม

ขนาดเสริม

Modals มีสองขนาดให้เลือก ใช้ได้ผ่านคลาสตัวปรับแต่งที่จะวางบนไฟล์.modal-dialog. ขนาดเหล่านี้เริ่มต้นที่จุดพักบางจุดเพื่อหลีกเลี่ยงแถบเลื่อนแนวนอนบนวิวพอร์ตที่แคบกว่า

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

การใช้งาน

ปลั๊กอินโมดอลจะสลับเนื้อหาที่ซ่อนอยู่ของคุณตามต้องการ ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript นอกจากนี้ยังเพิ่ม.modal-openเพื่อ<body>แทนที่พฤติกรรมการเลื่อนเริ่มต้น และสร้าง a .modal-backdropเพื่อให้พื้นที่การคลิกสำหรับการยกเลิกโมดอลที่แสดงเมื่อคลิกนอกโมดอล

ผ่านแอตทริบิวต์ข้อมูล

เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"หรือhref="#foo"เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

ผ่านจาวาสคริปต์

เรียก modal ด้วย id myModalด้วย JavaScript บรรทัดเดียว:

$('#myModal').modal(options)

ตัวเลือก

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

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
ฉากหลัง บูลีนหรือสตริง'static' จริง รวมถึงองค์ประกอบฉากหลังที่เป็นกิริยาช่วย หรือระบุstaticฉากหลังที่ไม่ปิดโมดอลเมื่อคลิก
แป้นพิมพ์ บูลีน จริง ปิดโมดอลเมื่อกดปุ่ม Escape
จุดสนใจ บูลีน จริง ให้ความสำคัญกับโมดอลเมื่อเริ่มต้น
แสดง บูลีน จริง แสดงโมดอลเมื่อเริ่มต้น

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

.modal(options)

เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobjectเสริม

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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

$('#myModal').modal('toggle')

.modal('show')

เปิดโมดอลด้วยตนเอง กลับไปยังผู้เรียกก่อนที่จะแสดงกิริยาจริง (กล่าวคือ ก่อนที่shown.bs.modalเหตุการณ์จะเกิดขึ้น)

$('#myModal').modal('show')

.modal('hide')

ซ่อนโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.modalเหตุการณ์จะเกิดขึ้น)

$('#myModal').modal('hide')

.modal('handleUpdate')

ปรับตำแหน่งของโมดอลด้วยตนเองหากความสูงของโมดอลเปลี่ยนแปลงขณะเปิดอยู่ (เช่น ในกรณีที่แถบเลื่อนปรากฏขึ้น)

$('#myModal').modal('handleUpdate')

.modal('dispose')

ทำลายโมดอลขององค์ประกอบ

เหตุการณ์

โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล เหตุการณ์โมดอลทั้งหมดถูกไล่ออกจากกิริยาช่วย (เช่น ที่<div class="modal">)

ประเภทงาน คำอธิบาย
show.bs.modal เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์ หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTargetคุณสมบัติของเหตุการณ์
แสดง.bs.modal เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTargetคุณสมบัติของเหตุการณ์
hide.bs.modal เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอดของอินสแตนซ์
hidden.bs.modal เหตุการณ์นี้เริ่มทำงานเมื่อโมดอลถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})