आप ट्विटर बूटस्ट्रैप मोडल में भागने की कुंजी को कैसे सक्रिय कर सकते हैं?

Question

मैंने उनके मुख्य प्रलेखन पृष्ठ पर ट्विटर बूटस्ट्रैप मोडल के निर्देशों का पालन
किया और data-keyboard="true"वाक्यविन्यास का उपयोग किया, लेकिन एस्केप कुंजी मोडल विंडो को बंद नहीं करता है।
क्या मुझे कुछ और याद आ रहा है?

कोड:

<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>

Comments

यह डिफ़ॉल्ट रूप से सक्षम है

— एडम एफ

Answer 1

ऐसा लग रहा है कि यह एक मुद्दा है जिसके साथ कीप इवेंट को बाध्य किया जा रहा है।

आप 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>

अधिक जानकारी के लिए आप इस मुद्दे पर चर्चा को जीथब पर देख सकते हैं

(नए TWBS भंडार का अद्यतन लिंक)

Comments

यह हालांकि इनपुट क्षेत्रों से ऑटोफोकस को रोकता है।

— टॉपलेस

यदि आप एक से अधिक स्थानों पर संवाद लागू करते हैं, तो आप अपने div.modal में डेटा-कीबोर्ड विशेषता को भी जोड़ सकते हैं (और कॉलर्स में इसे छोड़ सकते हैं)।

— विटालिक वेरोवोडोव

जैसा कि @nrek बताते हैं - भागने के साथ निकटता डिफ़ॉल्ट रूप से सच है, इसलिए आपको सख्ती की आवश्यकता नहीं है data-keyboard="true"- यह tabindex="-1"व्यवहार को सक्षम करता है

— लियो

मैं पुष्टि कर सकता हूं कि यह समाधान बूटस्ट्रैप 4 में काम करता है। मुझे नहीं पता कि यह डिफ़ॉल्ट रूप से काम क्यों नहीं करता है क्योंकि डॉक्स कहते हैं।

— बिनर वेब

इसके अलावा, data-keyboardमोडल तत्व पर निर्भर करता है, नियंत्रक नहीं। इसे सेट करके इसे परखा जा सकता है false।

— वुड्रोशिगरु

Answer 2

यदि आप जावास्क्रिप्ट के माध्यम से आह्वान कर रहे हैं, तो इसका उपयोग करें:

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

Comments

यह केवल वही काम करता था जो आपको करना था, लेकिन अब आपको यह भी सुनिश्चित करने की आवश्यकता है कि आपके div में एक 'tabindex = "- 1"' गुण है।

— बाला क्लार्क

मुझे केवल टैब इंडेक्स सेट करना था।

— वेल्ट्सकमरज़

@dchacke ऐसा इसलिए है क्योंकि कीबोर्ड गुण सत्य के लिए डिफ़ॉल्ट है! तो बस सेट tabindex = '- 1'

— nrek

Answer 3

tabindex="-1"मोडल div में विशेषता जोड़ें

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

</div>

Answer 4

कोणीय में मैं इस तरह का उपयोग कर रहा हूँ:

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

• पृष्ठभूमि: 'स्थिर' => बाहर क्लिक करने पर बंद करने के लिए
• कीबोर्ड: गलत => एस्केप बटन का उपयोग करके बंद करना बंद करें

Answer 5

बूटस्ट्रैप ३

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/

Comments

आपका उदाहरण कुंजी से बचने में सक्षम नहीं है

— बिनर वेब