बूटस्ट्रैप मोडल विंडो को पूरी तरह से कैसे नष्ट करें?

Question 1

मैंने विज़ार्ड कार्यान्वयन के लिए मोडल विंडो का उपयोग किया है जिसमें लगभग 4,5 चरण हैं। मुझे पृष्ठ को ताज़ा किए बिना अंतिम चरण (onFinish) और OnCancel चरण के बाद इसे पूरी तरह से नष्ट करने की आवश्यकता है । मैं बेशक इसे छिपा सकता हूं, लेकिन मोडल विंडो को छुपाना सब कुछ इस तरह से पुनर्स्थापित करता है जब मैं इसे फिर से खोलता हूं। किसी को भी इस मुद्दे पर मेरी मदद कर सकता है?

धन्यवाद किसी भी संकेत के जवाब मेरे लिए उपयोगी हैं।

Question 2

अगर बूटस्ट्रैप 3 है तो आप इसका उपयोग कर सकते हैं:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

Question 3

नोट: यह समाधान केवल संस्करण 3 से पहले बूटस्ट्रैप के लिए काम करता है। बूटस्ट्रैप 3 उत्तर के लिए, user2612497 द्वारा इसे देखें ।

आप क्या करना चाहते हैं:

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

हर बार दिखाए जाने के बाद मोडल खुद को इनिशियलाइज़ करने का कारण बनेगा। इसलिए यदि आप डिव में या जो कुछ भी लोड करने के लिए रिमोट कंटेंट का उपयोग कर रहे हैं, वह इसे खोले जाने के बाद फिर से करेगा। आप हर बार छिपाए जाने के बाद मोडल उदाहरण को नष्ट कर रहे हैं।

या जब भी आप तत्व को नष्ट करने को ट्रिगर करना चाहते हैं (यदि यह वास्तव में हर बार जब आप इसे छिपाते हैं तो नहीं होता) तो आपको सिर्फ मध्य रेखा को कॉल करना होगा:

$('#modalElement').data('modal', null);

Twitter बूटस्ट्रैप डेटा विशेषता में स्थित होने के लिए अपने उदाहरण के लिए देखता है, यदि कोई उदाहरण मौजूद है, तो यह इसे टॉगल करता है, यदि कोई उदाहरण मौजूद नहीं है, तो यह एक नया बना देगा।

उम्मीद है की वो मदद करदे।

Question 4

3.x संस्करण के लिए

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

2.x संस्करण के लिए (जोखिम भरा; नीचे दी गई टिप्पणियों को पढ़ें) जब आप बूटस्ट्रैप मोडल तीन तत्वों को बनाते हैं तो आपके पेज को बदला जा सकता है। इसलिए यदि आप सभी परिवर्तनों को पूरी तरह से रोलबैक करना चाहते हैं, तो आपको इसे प्रत्येक के लिए मैन्युअल रूप से करना होगा।

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

Question 5

आप इस तरह से पृष्ठ पुनः लोड किए बिना एक मोडल को पूरी तरह से नष्ट कर सकते हैं।

$("#modal").remove();
$('.modal-backdrop').remove();

लेकिन यह आपके html पेज से पूरी तरह से मोडल को हटा देगा। इसके बाद मोडल हाइड शो नहीं चलेगा।

Question 6

मैंने स्वीकृत उत्तर देने की कोशिश की है, लेकिन यह मेरे अंत में काम नहीं कर रहा है और मुझे नहीं पता कि स्वीकृत उत्तर कैसे काम करता है।

$('#modalId').on('hidden.bs.modal', function () {
  $(this).remove();
})

यह मेरी तरफ से पूरी तरह से ठीक काम कर रहा है। बीएस संस्करण> 3

Question 7

JQuery की शक्ति। $(selector).modal('hide').destroy();सबसे पहले आप यह बताएंगे कि आपके पास फिसलने का प्रभाव हो सकता है और फिर तत्व को पूरी तरह से हटा देता है, हालाँकि यदि आप चाहते हैं कि उपयोगकर्ता चरणों को पूरा करने के बाद फिर से मोडल खोलने में सक्षम हों। आप केवल उन सेटिंग्स को अपडेट कर सकते हैं, जिन्हें आप रीसेट करना चाहते हैं, इसलिए अपने मोडल के सभी इनपुट रीसेट करने के लिए यह इस तरह दिखेगा:

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

Question 8

जो मैं समझता हूं, आप उसे हटाना नहीं चाहते हैं, न ही उसे छिपाना चाहते हैं। क्योंकि आप इसे बाद में पुन: उपयोग करना चाहते हैं .. लेकिन अगर आप इसे फिर से खोलते हैं तो यह पुरानी सामग्री नहीं चाहते हैं?

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

यदि आप इसे एक गतिशील टेम्पलेट के रूप में उपयोग करना चाहते हैं, तो कुछ ऐसा करें

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

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

Question 9

बूटस्ट्रैप 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

Question 10

यदि आपके मोडल में कोई iframe है, तो आप निम्न कोड द्वारा इसकी सामग्री को निकाल सकते हैं:

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

Question 11

मेरा दृष्टिकोण clone()jQuery की विधि का उपयोग करना होगा । यह आपके तत्व की एक प्रति बनाता है, और यही आप चाहते हैं: आपके पहले अनलॉक्ड मोडल की एक प्रति, जिसे आप अपनी इच्छा से बदल सकते हैं: डेमो (jsfiddle)

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

मेरे द्वारा उपयोग किया जाने वाला मार्कअप सबसे बुनियादी है, इसलिए आपको केवल सही तत्वों / घटनाओं पर बांधने की जरूरत है, और आपके पास अपना विज़ार्ड रीसेट होना चाहिए।

प्रत्यायोजित घटनाओं के साथ बाँधने के लिए सावधान रहें , या प्रत्येक में अपने मॉडल के आंतरिक तत्वों को रीसेट करें ताकि प्रत्येक नया मोडल उसी तरह व्यवहार करे।

Question 12

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

this.$el.modal().off();

Question 13

मेरे पास एक ही परिदृश्य था जहां मैं एक बटन क्लिक पर एक नया मोडल खोलूंगा। एक बार हो जाने के बाद, मैं इसे अपने पेज से पूरी तरह से हटा देना चाहता हूं ... मैं मोडल को हटाने के लिए रिमूव का उपयोग करता हूं .. बटन पर क्लिक करने पर मैं जांचता हूं कि क्या मोडल मौजूद है, और अगर सही है तो मैं इसे नष्ट कर दूंगा और एक नया मोडल बनाऊंगा।

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

Question 14

$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3

Question 15

यह डोम से पूरी तरह से मोडल को हटा देता है, "एप्लाइड" मॉडल्स के लिए भी काम कर रहा है।

#pickoptionmodal मेरे मोडल विंडो की आईडी है।

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

Question 16

बटन क्लिक के माध्यम से बंद होने के बाद मुझे मोडल को नष्ट करना होगा, और इसलिए मैं निम्नलिखित के साथ आया।

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

ध्यान दें कि यह बूटस्ट्रैप 3 के साथ काम करता है।

Question 17

बूटस्ट्रैप 4.x पर भी काम करता है

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

Question 18

यदि मोडल छाया गहरा रहता है और एक से अधिक मोडल दिखाने के लिए नहीं जा रहा है तो यह मददगार होगा

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

Question 19

मुझे अलग-अलग लिंक क्लिक के लिए समान मोडल का उपयोग करना था। मैंने छिपा कॉलबैक में केवल html सामग्री को मोडल के खाली "" के साथ बदल दिया।

Question 20

इसने मेरे लिए काम किया।

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

संवाद और पृष्ठभूमि चली गई, लेकिन अगली बार जब मैंने बटन पर क्लिक किया तो वे वापस आ गए।

Question 21

यह बूटस्ट्रैप v3.3.6 के लिए काम करता है

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});

Question 22

केवल इसने मेरे लिए काम किया

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

यह चयनकर्ताओं को उन्हें खाली करने के लिए मजबूर करता है क्योंकि बूटस्ट्रैप और jquery संस्करण इस समस्या का कारण हो सकता है

Question 23

छिपाने पर एकल पंक्ति पूर्ण निष्कासन (ES6)

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

Question 24

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

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

Question 25

मुझे नहीं पता कि यह कैसे लग सकता है लेकिन मेरे लिए यह काम ………।

$("#YourModalID").modal('hide');