ट्विटर बूटस्ट्रैप मोडल विंडो को बंद करने से हटाएं

Question

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

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

Comments

आपके पास ऐसा करने के लिए एक पूरी तरह से वैध कारण हो सकता है (और कई अन्य होने की संभावना है)। हालांकि, यह ध्यान देने योग्य है कि सामान्य तौर पर, यूएक्स विचार इसके खिलाफ सलाह देंगे - अधिकांश उपयोगकर्ता उम्मीद करते हैं कि एक मोडल से बाहर निकलने पर सामग्री "नीचे" को "सामने" लाएगा।

— ट्रेवर

@ यह मोडल के विपरीत है ।

— रॉलिंग

क्या होगा, अगर बैकग्राउंड में कोई ऐसा पेज है, जिसे केवल तभी सक्रिय किया जा सकता है जब उपयोगकर्ता पहले लॉग इन करे। मॉडल ओके बटन पर क्लिक करके उपयोगकर्ता लॉगिन पेज पर पुनः निर्देशित हो जाएगा। यदि उपयोगकर्ता केवल क्लिक कर सकता है, तो इसका अर्थ है कि उपयोगकर्ता लॉगिन पृष्ठ को छोड़ देता है और केवल लॉगिन के बिना पृष्ठ को एक्सेस कर रहा है। आल हेल ब्रेक

— लूज

@ आपके दावे का समर्थन करने के लिए मुझे कोई सबूत नहीं दिखता है।

— १२५२ .४।

जब उपयोगकर्ता को मोडल में कई फ़ॉर्म फ़ील्ड भरने होते हैं, तो यह सुविधा एक परिदृश्य में समझदार होती है। यदि उपयोगकर्ता गलती से मोडल के बाहर क्लिक करता है, तो सभी दर्ज किए गए विवरण खो जाएंगे; तब उन्हें मोडल को फिर से सक्रिय करना होगा और खेतों को फिर से भरना होगा। यह सुविधा इस तरह की जलन से बचती है।

— मिकमैकुसा

Answer 1

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

उदाहरण:

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

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

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

Comments

@ user1296175 इसे प्राप्त करने के लिए आपका अंतिम कोड क्या था? मैं भी ऐसा ही करना चाहता हूं।

— अल्फा मैम

धन्यवाद @nobita, डेटा-बैकड्रॉप जोड़ें = "स्थिर" चाल करता है! ट्विटर बूटस्ट्रैप दस्तावेज़ खराब है :(

— ब्लू स्मिथ

@@ वरुण चटर्जी से जवाब की जाँच करें और इसे अपनी मोडल परिभाषा पर शामिल करें

— Leandro

js की सिंगल लाइन के साथ सभी मॉडल्स के लिए आउट-साइड क्लिक को अक्षम करें: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';

— लुकास लियसिस

कोणीय उपयोगकर्ताओं के लिए: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', नियंत्रक: 'modalController', पृष्ठभूमि: 'static',});

— एलेक्जेंड्रा

Answer 2

बस backdropसंपत्ति को सेट करें 'static'।

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

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

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

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

Comments

हां, यह सबसे साफ, सरलतम उत्तर है (क्योंकि यह डेटा विशेषताओं को जोड़ने से बचता है)। संदर्भ के लिए, backdropऔर विकल्प अनुभाग के तहत उनके प्रलेखन में यहांkeyboard उल्लेख किया गया है ।

— जेसी डुप्युई

क्या डेटा विशेषताओं से बचा जा सकता है? कृपया इस पर मार्गदर्शन करें।

@ गोपालअगरवाल: आप कैसे मोडल सेटअप करते हैं, इस पर निर्भर करता है। यदि आप एक मॉडल को कई एंकर टैग से जोड़ते हैं, तो डेटा विशेषताओं का उपयोग करना समझ में आता है। लेकिन जब प्रति टैग सिर्फ एक मॉडल होता है, तो मैं स्क्रिप्ट के मापदंडों के साथ जाता हूं, जहां हर व्यवहार एक जगह दिखाई देता है।

— निर्मल

इसके अलावा मोडल प्रदर्शित करने से बचने के लिए तुरंत शो में पास करें: false

— ClearCloud8

Answer 3

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

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

Comments

हां, यह सबसे साफ, सरल उत्तर है (चूंकि यह डेटा विशेषताओं को जोड़कर काम करता है)। संदर्भ के लिए, विकल्प अनुभाग के तहत उनके प्रलेखन में पृष्ठभूमि और कीबोर्ड का उल्लेख यहां किया गया है।

— बह गया

यदि आप पृष्ठ लोड पर मोडल लॉन्च करते हैं तो यह अन्य समापन विकल्पों को हटाने का सबसे अच्छा तरीका है।

— संता

Answer 4

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

Comments

इससे मुझे मदद मिली। "बैकड्रॉप: 'स्टैटिक'" सेट करने के बाद उपयोगकर्ता एक क्लिक के साथ मॉडल को बंद कर सकता है; एक बग की तरह लग रहा था, लेकिन यह चाल चली!

— उमर

अभी के लिए: $ ('# मोडल')। डेडटाटा ('बीस्मोडल')।

— डी

Answer 5

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

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

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

       e.preventDefault();
   });

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

Comments

फिर, इसे कैसे वापस करना है?

— सेराटकोने

बस सुरुचिपूर्ण। thx :) और @sertaconay सिर्फ एक बूलियन वैरिएबल बनाते हैं (उदाहरण के लिए) जो यह तय करने के लिए चेक किया जाएगा कि क्या आप डिफॉल्ट को रोकना चाहते हैं

— निमरोड योनतन बेन-नेस

यहाँ केवल एक विकल्प है कि एक मोडल के बाद काम किया गया था

— ask_io

यह एक सही समाधान है यदि आप चाहते हैं कि जब मोडल बंद हो और जब वे न हों, तो बेहतर नियंत्रण रखना चाहिए।

— Curos

Answer 6

हां, आप इसे इस तरह कर सकते हैं:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Comments

यह एक ऐसे मामले के लिए एकदम सही है जहां html में मोडल घोषित किया गया है, और केवल जावास्क्रिप्ट के माध्यम से खोला गया है - अर्थात इसका कोई लिंक नहीं है। धन्यवाद!

— hgolov

Answer 7

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

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

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

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

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

Comments

stackoverflow.com/questions/16030448/… लेकिन मुझे यह समाधान पसंद नहीं है

— विक्टर

Answer 8

बस इन दोनों चीजों को जोड़ें

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

अब ऐसा दिखेगा

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

यह पलायन बटन को निष्क्रिय कर देगा और कहीं भी क्लिक और छिपाएगा।

Comments

यह सलाह सालों पहले दी गई थी।

— मिकमैकुसा 22

Answer 9

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

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

Answer 10

जैसा कि डी 3 विकासकर्ता कहता है, निम्नलिखित कोड इसे हल करते हैं:

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

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

Answer 11

मैंने जो सबसे अच्छा पाया वह इस कोड को लिंक से जोड़ना है

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

Answer 12

यदि कोई व्यक्ति Google से यहां यह जानने की कोशिश कर रहा है कि किसी को मोडल को बंद करने से कैसे रोका जाए, तो यह मत भूलो कि मोडल के शीर्ष दाईं ओर एक करीब बटन भी है जिसे निकालने की आवश्यकता है।

मैंने इसे छिपाने के लिए कुछ CSS का इस्तेमाल किया:

#Modal .modal-header button.close {
    visibility: hidden;
}

ध्यान दें कि "प्रदर्शन: कोई नहीं;" जब मोडल बनाया जाता है तब ओवरराइट हो जाता है, इसलिए इसका उपयोग न करें।

Comments

क्या आप केवल मोडल-हेडर से बटन नहीं हटा सकते हैं?

— foop

कभी-कभी HTML को बदलने के बजाय CSS का उपयोग करना फायदेमंद होता है।

— आकर्षित किया

Answer 13

अगर आप सशर्त रूप से 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( डिफ़ॉल्ट व्यवहार ) सेट करने के विकल्प को बंद करने से रोकेगा ।

Answer 14

आप नीचे की लाइन का उपयोग करके मोडल पॉपअप का डिफ़ॉल्ट व्यवहार सेट कर सकते हैं:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

Comments

+1 इस विधि की तरह, मैं सभी मॉडल्स के लिए वह विकल्प नहीं चाहता।

— tsohr

Answer 15

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

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

अपने मोडल डिवाइडर में।

Comments

यह सलाह इस पेज पर वर्षों पहले प्रदान की गई थी।

— मिकमैकुसा 22

Answer 16

खैर, यह एक और उपाय है जो आप में से कुछ लोग खोज रहे होंगे (जैसा कि मैं था ..)

मेरी समस्या समान थी, मोडल बॉक्स बंद हो रहा था जबकि मेरे अंदर का iframe लोड हो रहा था, इसलिए मुझे iframe को लोडिंग खत्म होने तक मोडल खारिज को अक्षम करना पड़ा, फिर से सक्षम करें।

यहां प्रस्तुत समाधान 100% काम नहीं कर रहे थे।

मेरा समाधान यह था:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

इसलिए मैं अस्थायी रूप से मोडल को बंद होने से रोकता हूं:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

लेकिन इसके अलावा var is_loading है जो iframe लोड होने के बाद फिर से बंद करने में सक्षम होगा।

Answer 17

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

Answer 18

मोडल प्रदर्शित होने के बाद बूटस्ट्रैप 4.1.3 में बैकड्रॉप स्थिति को अपडेट करने के लिए, हमने बूटस्ट्रैप-मोडल-वेपर प्लगइन से निम्न लाइन का उपयोग किया । प्लगइन रिपोजिटरी कोड संदर्भ ।

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");