ट्विटर बूटस्ट्रैप/jQuery - मोडल को अस्थायी रूप से बंद होने से कैसे रोकें?

Question

मैं ट्विटर बूटस्ट्रैप मोड का उपयोग कर रहा हूं, डिफ़ॉल्ट विकल्पों के साथ जहां आप बैडड्रॉप पर क्लिक कर सकते हैं या मोडल को बंद करने के लिए [Esc] दबा सकते हैं।

हालांकि, जब मैं मोडल में एजेक्स ऑपरेशन शुरू करता हूं तो मैं मोडल को किसी भी तरह से बंद होने से अक्षम करना चाहता हूं। इसलिए मैं बटन अक्षम करता हूं और मोडल के करीबी बटन को छुपाता हूं लेकिन मैं यह नहीं समझ सकता कि बैकड्रॉप और [एएससी] कुंजी को कैसे अक्षम किया जाए।

मैंने कोशिश की:

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

लेकिन इस मक्खी पर काम करने लगता है।

AJAX ऑपरेशन समाप्त होने के बाद मुझे बैकड्रॉप और कीबोर्ड को पुन: सक्षम करने की भी आवश्यकता होगी।

Answer 1

नोट: यह समाधान twitter bootstrap 2.x लक्षित कर रहा है! बूटस्ट्रैप 3 के अनुसार मतभेदों के लिए this answer (बस नीचे) देखें।

---

मूल स्रोत को संशोधित करने बिना बूटस्ट्रैप मोडल कार्यक्षमता विस्तार।

@ डेविड और How to Extend Twitter Bootstrap Plugin पर उनके सुझाव के लिए धन्यवाद, अंततः मुझे यह काम करने के लिए मिला। यह मोडल "लॉक" के साथ अपने समाधान का थोड़ा संशोधित संस्करण है। मैं इसे एक अतिरिक्त उत्तर के रूप में पोस्ट करता हूं क्योंकि मुझे लगता है कि यह दूसरों के लिए एक प्रारंभिक बिंदु हो सकता है कि मेरे जैसे इस मुद्दे से कड़ी मेहनत कर रही है।

// save the original function object 
var _superModal = $.fn.modal; 

// add locked as a new option 
$.extend(_superModal.defaults, { 
    locked: false 
}); 

// create a new constructor 
var Modal = function(element, options) { 
    _superModal.Constructor.apply(this, arguments) 
} 

// extend prototype and add a super function 
Modal.prototype = $.extend({}, _superModal.Constructor.prototype, { 
    constructor: Modal 

    , _super: function() { 
     var args = $.makeArray(arguments) 
     // call bootstrap core 
     _superModal.Constructor.prototype[args.shift()].apply(this, args) 
    } 

    , lock : function() { 
     this.options.locked = true 
    } 

    , unlock : function() { 
     this.options.locked = false 
    } 

    , hide: function() { 
     if (this.options.locked) return 
     this._super('hide') 
    } 
}); 

// override the old initialization with the new constructor 
$.fn.modal = $.extend(function(option) { 
    var args = $.makeArray(arguments), 
    option = args.shift() 

    // this is executed everytime element.modal() is called 
    return this.each(function() { 
     var $this = $(this) 
     var data = $this.data('modal'), 
      options = $.extend({}, _superModal.defaults, $this.data(), typeof option == 'object' && option) 

     if (!data) { 
      $this.data('modal', (data = new Modal(this, options))) 
     } 
     if (typeof option == 'string') { 
      data[option].apply(data, args) 
     } 
    }); 
}, $.fn.modal); 

इस तकनीक यह bootstrap.js को बदलने के लिए nessecary नहीं होना चाहिए, और एक ही कार्यक्षमता के साथ

और अधिक आसानी से बूटस्ट्रैप परियोजनाओं के बीच साझा किया जा सकता है। यह विधि अन्य सभी बूटस्ट्रैप प्लगइन्स पर लागू होनी चाहिए। अभी तक बटन के साथ अभी तक कोशिश की है, लेकिन मैं इसे क्यों नहीं करना चाहिए।

काम कर बेला देख ->http://jsfiddle.net/Sz7ZS/

Answer 2

आप अकेले नहीं हैं जो उस सुविधा को याद कर रहे हैं। मुझे लगता है कि कभी-कभी बूटस्ट्रैप भी "minimalistic" होता है, पीछे के लोगों के पास "कार्यान्वयन परत" में बहुत कुछ किया जाना चाहिए, लेकिन बूटस्ट्रैप jQuery प्लगइन स्वयं को असंभव बनाता है, लेकिन इसका उपयोग करना असंभव नहीं है!

bootstrap.js v2.1.1 में

मोडल लाइन 61

Modal.prototype में

में शुरू होता है, दो काम करता है, lock और unlock जोड़ने, तो यह दिखता है:

आप इस तरह कार्यक्षमता खुद को लागू करना इस तरह (मैं यहाँ केवल modal.prototype की शुरुआत दिखाने के लिए, क्योंकि यह बहुत अधिक कोड है)

Modal.prototype = { 

     constructor: Modal 

     //add this function 
    , lock: function() { 
     this.options.locked = true 
     } 

     //add this function 
    , unlock: function() { 
     this.options.locked = false 
     } 

    , toggle: function() { 
    ... 
    ... 

फिर, यह भी Modal.prototype में, समारोह hide मिल जाए, और इसलिए यह इस (फिर से, छिपाने के केवल शीर्ष दिखाया जाता है) की तरह दिखता है एक पंक्ति जोड़ें

, hide: function (e) { 
    e && e.preventDefault() 

    var that = this 

    //add this line 
    if (that.options.locked) return 

    e = $.Event('hide') 
    ... 
    ... 

और अंत में, परिवर्तन करने के लिए $.fn.modal.defaults:

$.fn.modal.defaults = { 
     backdrop: true 
    , keyboard: true 
    , show: true 
    , locked: false //this line is added 
    } 

अब आपके बूटस्ट्रैप मोडल में ऑन-द-फ्लाई लॉक/अनलॉक कार्यक्षमता है, जो उपयोगकर्ता को महत्वपूर्ण क्षणों पर मोडल बंद करने से रोकती है।

उदाहरण:

यह एक बदले हुए मैं दो बटन डाला है, "ताला" से http://twitter.github.com/bootstrap/javascript.html#modals

<!-- Button to trigger modal --> 
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary" onclick="$('#myModal').modal('lock');">lock</button> 
    <button class="btn btn-primary" onclick="$('#myModal').modal('unlock');">unLock</button> 
    </div> 
</div> 
<script type="text/javascript"> 

"लाइव डेमो" का संस्करण और "अनलॉक" है - जब क्लिक किया, वे सेट या तो लॉक या सामान्य मोड में मोडल (

संपादित करें, अपने मामले में, आपको केवल लॉक/ऑनलॉक कॉल करना होगा कर ajax:

$("myModal").modal('lock'); 
$.ajax({ 
    url: url, 
    ... 
    ... 
    , success(html) { 
     ... 
     ... 
     $("#myModal").modal('unlock'); 
    } 
}); 

Answer 3

धन्यवाद इस पर अपने काम के लिए @davidkonrad। मैं इस रूप में अच्छी तरह लागू करने के लिए कोशिश कर रहा था और ऐसा लगता है कि चीजें बजाय बूटस्ट्रैप 3. साथ बदल गया है अब:

_superModal.defaults

यह अब निर्माता से जुड़ा हुआ है आप

_superModal.Constructor.DEFAULTS

क्या करना है तो

इसके अलावा कन्स्ट्रक्टर बदल गया है जिसका मतलब है कि मुझे इसकी प्रतिलिपि बनाना और इसे संशोधित करना था जो आदर्श से कम है। इसके बजाय मैं निम्नलिखित कोड के साथ आया हूं जो काम करता है और कन्स्ट्रक्टर की प्रतिलिपि नहीं करता है और यदि बूटस्ट्रैप आगे बढ़ता है तो अधिक मूर्ख-प्रमाण होना चाहिए।

$('#dlg').modal('unlock');

Yay: मोडल लॉक करने के लिए

// save the original function object 
var _superModal = $.fn.modal; 

// add locked as a new option 
$.extend(_superModal.Constructor.DEFAULTS, { 
    locked: false 
}); 

// capture the original hide 
var _hide = _superModal.Constructor.prototype.hide; 
// console.log('HIDE:', _hide); 

// add the lock, unlock and override the hide of modal 
$.extend(_superModal.Constructor.prototype, { 
    // locks the dialog so that it cannot be hidden 
    lock: function() { 
     // console.log('lock called'); 
     // console.log('OPTIONS',this.options); 
     this.options.locked = true; 
    } 
    // unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static) 
    ,unlock: function() { 
     // console.log('unlock called'); 
     this.options.locked = false; 
    } 
    // override the original hide so that the original is only called if the modal is unlocked 
    ,hide: function() { 
     // console.log('hide called'); 
     if (this.options.locked) return; 

     _hide.apply(this, arguments); 
    } 
}); 

क्रम में

तो: एक जाना है

$('#dlg').modal('lock');

और अनलॉक करने के लिए!

Answer 4

ऐसा करने का एक आसान तरीका है। This बूटस्ट्रैप पुल अनुरोध थोड़ा और बताता है। समाधान मोडल (कीबोर्ड, माउस क्लिक, क्लोज़ बटन) को बंद करने के लिए सभी विधियों को अक्षम करता है।

आप सभी मॉडल को बंद करने को निष्क्रिय करने के क्या करना है है:

$('#myModal').data('bs.modal').isShown = false; 

फिर से बंद करने को सक्षम करने के लिए:

$('#myModal').data('bs.modal').isShown = true; 

उदाहरण

यहां कुछ नमूना कोड है कि में काम करता है एक jQuery के साथ संयोजन प्राप्त करें:

// disable closing the modal 
$('#myModal').data('bs.modal').isShown = false; 

// Send an HTTP GET request to the server - replace this with getJSON, post or ajax as needed 
$.get("ajax/test.html", function(data) { 
    // enable closing the modal 
    $('#myModal').data('bs.modal').isShown = true; 

    // Do something with the data 
    $(".result").html(data); 
}); 

Answer 5

आप एक चर isBlocked आप जबकि कर AJAX सच करने के लिए कहता है, तो आप इसके bootsrap मोडल छिपाने घटना पर इस तरह से जांच कर सकते हैं निर्धारित कर सकते हैं कि बना सकते हैं:

$('#myModal').on('hide.bs.modal', function (e) { 
     //Prevent modal from closing is isBlocked is true 
     if(isBlocked) return e.preventDefault(); 
}) 

मुझे लगता है कि इस तरह से Bootsrap विस्तार की तुलना में आसान है , उम्मीद है कि यह किसी की मदद करता है: डी