ฉันทำตามคำแนะนำสำหรับโมดอล Twitter Bootstrap ในหน้าเอกสารหลัก
และใช้data-keyboard="true"ไวยากรณ์ที่กล่าวถึง แต่ปุ่ม Escape ไม่ได้ปิดหน้าต่างโมดอล
มีอย่างอื่นที่ฉันขาดหายไปหรือไม่?

รหัส:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

ดูเหมือนว่านี่จะเป็นปัญหาเกี่ยวกับวิธีการผูกเหตุการณ์คีย์อัพ

คุณสามารถเพิ่มtabindexแอตทริบิวต์ให้กับโมดอลเพื่อแก้ไขปัญหานี้:

tabindex="-1"

ดังนั้นโค้ดทั้งหมดของคุณควรมีลักษณะดังนี้:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

สำหรับข้อมูลเพิ่มเติมคุณสามารถดูการสนทนาเกี่ยวกับปัญหานี้ได้ที่ github

(อัปเดตลิงก์ไปยังที่เก็บ TWBS ใหม่)

นอกจากนี้หากคุณเรียกใช้ผ่าน javascript ให้ใช้สิ่งนี้:

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

เพิ่มtabindex="-1"แอตทริบิวต์ให้กับ modal div

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

ในเชิงมุมฉันใช้สิ่งนี้:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

• ฉากหลัง: 'static' => หยุดเพื่อปิดเมื่อคลิกด้านนอก
• แป้นพิมพ์: false => หยุดเพื่อปิดโดยใช้ Escape buttton

Bootstrap 3

ใน HTML ให้ตั้งค่าdata-backdropเป็นแบบคงที่และdata-keyboardเป็นเท็จ

ตัวอย่าง:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

หรือ

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

ทดสอบสด:

https://jsfiddle.net/sztx8qtz/

เรียนรู้เพิ่มเติม: http://budiirawan.com/prevent-bootstrap-modal-closing/