jquery - बंद करने से ट्विटर बूटस्ट्रैप मोडल विंडो को अस्वीकार करें




twitter-bootstrap modal-dialog (12)

मैं ट्विटर बूटस्ट्रैप का उपयोग कर एक मोडल विंडो बना रहा हूं। डिफ़ॉल्ट व्यवहार यह है कि यदि आप मोडल क्षेत्र के बाहर क्लिक करते हैं, तो मोडल स्वचालित रूप से बंद हो जाएगा। मैं इसे अक्षम करना चाहता हूं - यानी मोडल के बाहर क्लिक करते समय मोडल विंडो बंद न करें।

क्या कोई ऐसा करने के लिए jQuery कोड साझा कर सकता है?


@ एआईएमकेडीएन के उत्तर की तरह, लेकिन यह आपको मोडल को फिर से शुरू किए बिना विकल्पों को बदलने की अनुमति देगा।

$('#myModal').data('modal').options.keyboard = false;

या यदि आपको कई विकल्प करने की ज़रूरत है, तो जावास्क्रिप्ट के with काम में आता है!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

यदि मोडल पहले से ही खुला है, तो ये विकल्प केवल अगली बार मोडल खोले जाने पर प्रभावी होंगे।


आप इन विशेषताओं को मोडल परिभाषा में भी शामिल कर सकते हैं:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

आप पृष्ठभूमि के क्लिक-टू-क्लोज़ व्यवहार को अक्षम कर सकते हैं और यह जावास्क्रिप्ट अपने पृष्ठ पर जोड़कर अपने सभी मॉडलों के लिए डिफ़ॉल्ट बना सकते हैं (सुनिश्चित करें कि इसे jQuery और बूटस्ट्रैप जेएस लोड होने के बाद निष्पादित किया गया है):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

ऐसा करना आजकल बहुत आसान है। बस जोड़ दो:

data-backdrop="static" data-keyboard="false" 

आपके मॉडल विभाजक में।


जैसा कि D3VELOPER कहता है, निम्न कोड इसे हल करता है:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

मैं jquery और बूटस्ट्रैप दोनों का उपयोग कर रहा हूं और बस removeData('modal') काम नहीं करता है।


बस backdrop प्रॉपर्टी को 'static' सेट करें।

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

आप keyboard प्रॉपर्टी को false भी सेट करना चाहते हैं क्योंकि इससे कीबोर्ड पर एएससी कुंजी दबाकर मोडल को बंद होने से रोकता है।

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

myModal div की आईडी है जिसमें आपकी मोडल सामग्री होती है।


यदि आप backdrop click closing सुविधा को सशर्त रूप से अक्षम करना चाहते हैं। रनटाइम के दौरान backdrop विकल्प को static करने के लिए आप निम्न पंक्ति का उपयोग कर सकते हैं।

बूटस्ट्रैप v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

बूटस्ट्रैप v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

यह बंद होने से backdrop विकल्प को false ( डिफ़ॉल्ट व्यवहार ) पर सेट किए गए पहले से ही तत्काल मॉडल को रोक देगा।


यदि आपने पहले से ही मोडल विंडो शुरू की है, तो आप $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) साथ विकल्पों को रीसेट करना चाहेंगे $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) सुनिश्चित करने के लिए यह नए विकल्प लागू करेगा।


संवाद के बूटस्ट्रैप 'छुपाएं' ईवेंट को ओवरराइड करें और इसके डिफ़ॉल्ट व्यवहार को रोकें (संवाद का निपटान करने के लिए)।

कृपया नीचे कोड स्निपेट देखें:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

यह हमारे मामले में ठीक काम करता है।


सबसे अच्छा मुझे मिला यह लिंक लिंक में जोड़ता है

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

मेरा मानना ​​है कि आप पृष्ठभूमि में बैकड्रॉप मान सेट करना चाहते हैं। यदि आप Esc कुंजी का उपयोग करते समय विंडो को बंद करने से बचना चाहते हैं, तो आपको एक और मान सेट करना होगा।

उदाहरण:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

या यदि आप जावास्क्रिप्ट का उपयोग कर रहे हैं:

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

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" 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 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>




mouseclick-event