बूटस्ट्रैप मोडल: क्लोज करंट, ओपन नया

Question

मैंने कुछ समय के लिए देखा है, लेकिन मुझे इसके लिए कोई समाधान नहीं मिल रहा है। मुझे निम्नलिखित चाहिए:

• बूटस्ट्रैप मोडल के अंदर एक URL खोलें। मेरे पास यह काम बंद है। तो सामग्री गतिशील रूप से भरी हुई है।
• जब कोई उपयोगकर्ता इस मोडल के अंदर एक बटन दबाता है, तो मैं चाहता हूं कि वर्तमान मॉडल छिप जाए, और उसके तुरंत बाद, मैं चाहता हूं कि नया URL नए URL के साथ खुल जाए (जिस पर उपयोगकर्ता ने क्लिक किया)। 2 डी मोडल की यह सामग्री भी गतिशील रूप से भरी हुई है।
• यदि उपयोगकर्ता फिर उस 2 मोडल को बंद कर देता है, तो पहले मोडल को फिर से वापस आना होगा।

मैं इसे दिनों से देख रहा हूं, उम्मीद है कि कोई मेरी मदद कर सकता है।

अग्रिम में धन्यवाद।

Comments

बूटस्ट्रैप 2 या 3? क्या आपने जो भी मिला है, उसका एक JS Fiddle सेट कर सकते हैं।

— टिम वासन

बूटस्ट्रैप 2.3.1। मुझे लगता है कि मैं गतिशील सामग्री की वजह से एक जेएस

— फिडेल को स्थापित नहीं कर सकता

Answer 1

विशिष्ट कोड देखे बिना, आपको सटीक उत्तर देना मुश्किल है। हालाँकि, बूटस्ट्रैप डॉक्स से, आप मोडल को इस तरह छिपा सकते हैं:

$('#myModal').modal('hide')

फिर, एक और मोडल दिखाओ जब वह छिपा हो:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

आपको URL को नई मोडल विंडो में धकेलने का एक तरीका खोजना होगा, लेकिन मुझे लगता है कि यह तुच्छ होगा। कोड देखे बिना उसका उदाहरण देना कठिन है।

Comments

अजीब बात है, मैं इसे बूटस्ट्रैप 3 के साथ काम कर रहा हूं। मुझे लगता है कि मेरे कोड में बूटस्ट्रैप टूलटिप्स के साथ संघर्ष था, और इसे संस्करण 3 में बदल दिया गया है। धन्यवाद

— इल्को लुर्टेसेमा

बूटस्ट्रैप v3 इवेंट पर 'छिपा हुआ है ।bs.modal'

— coure2011

डेटा-खारिज के साथ एक समाधान बहुत अधिक सुरुचिपूर्ण है (2015 में कम से कम) और किसी भी गैर-बूटस्ट्रैप जावास्क्रिप्ट की आवश्यकता नहीं है।

— मैनुअल आर्म्ड श्मिट

धन्यवाद @ coure2011

— कैपकोम

data-toggle = "modal" data-target = "# targetmodal" डेटा-खारिज = "modal" यह ठीक काम करता है।

— सुशांत

Answer 2

मुझे पता है कि यह एक देर से जवाब है, लेकिन यह उपयोगी हो सकता है। यहाँ यह करने के लिए एक उचित और साफ तरीका है, जैसा कि @ करीमा ने ऊपर उल्लेख किया है। आप वास्तव में एक ही बार में दो कार्य कर सकते हैं; triggerऔर dismissमोडल।

HTML मार्कअप;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

डेमो

Comments

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

— ग्रेविटी ग्रेव

मुझे एक समान समस्या है लेकिन कोणीय में। क्या आप जानते हैं कि आपने यहाँ जो किया वही किया है लेकिन कोणीय नियंत्रक templateUrlऔर windowClassगुणों का उपयोग करके ?

— जॉन आर

धन्यवाद - मेरे लिए काम करता है। मेरे लिए मुख्य समस्या यह थी कि मैं data-dismiss="modal"बटन से चूक गया

— FDisk

@ महमूद, हे एक से दूसरे मोडल को लोड करते समय कंपन के प्रभाव से बचने का कोई तरीका है? और अतिरिक्त स्क्रॉल से कैसे बचें?

— अरुण जेवियर

यह एक Chrome समस्या है, जब Google Chrome "शेक" में मोडल, क्लोज़ या ओपन को बदलता है। -webkit-backface-visibility: hidden;html पर कोशिश करें, बॉडी सीएसएस

— Máxima Alekz

Answer 3

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

उसी बटन में HTML में, आप डेटा-बर्खास्तगी के साथ वर्तमान मोडल को बंद करने और सीधे लक्ष्य-लक्ष्य के साथ एक नया मोडल खोलने के लिए कह सकते हैं:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

Comments

इस विचार के लिए धन्यवाद

— जितेन्द्र व्यास

समस्या data-dismiss="modal"यह है कि यह आपकी सामग्री को बाईं ओर शिफ्ट कर देगा जब आप दूसरा मोडल बंद कर देंगे।

— कुलदीप दांगी

hmmmm। यह विधि मेरे लिए काम नहीं करती है। 1 एक दूर चला जाता है लेकिन दूसरा कभी नहीं दिखाई देता

— केविनड्यूस

मुझे यकीन नहीं है कि आपको क्या समस्या थी, केविन, लेकिन इसने मेरे लिए बूटस्ट्रैप 3 के साथ ठीक काम किया। पहला मोडल गायब हो गया और दूसरा बस ठीक खुल गया :)

— रोलांडीएक्सॉर

मेरे लिए खूबसूरती से काम किया! और बहुत ही सरल उपाय है। धन्यवाद!

— गुरू 6

Answer 4

data-dismiss="modal"इसके साथ समस्या यह है कि यह आपकी सामग्री को बाईं ओर स्थानांतरित कर देगा

मैं साझा कर रहा हूँ क्या मेरे लिए काम किया, समस्या बयान उद्घाटन था pop1सेpop2

JS CODE

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

Comments

इस तरह के एक सरल समाधान :)

— ज्योफ

Answer 5

मैं इस विधि का उपयोग करता हूं:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

Answer 6

निम्नलिखित कोड का उपयोग करके आप पहले मोडल को छिपा सकते हैं और तुरंत दूसरे मोडल को खोल सकते हैं, उसी रणनीति का उपयोग करके आप दूसरे मोडल को छिपा सकते हैं और पहले वाले को दिखा सकते हैं।

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

Comments

स्क्रॉल मुद्दे को भी ठीक करता है

— रिचर्ड होशम

Answer 7

आपको लिंक या बटन में निम्नलिखित विशेषता जोड़ने की आवश्यकता है जहाँ आप इस कार्यक्षमता को जोड़ना चाहते हैं:

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

एक डिटेल ब्लॉग: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Comments

पूरी तरह से बूटस्ट्रैप 4 के साथ काम करता है

— हीदर 92065

Answer 8

data-dismiss="modal" 

इसका उपयोग मौजूदा खुले मॉडल को बंद करने के लिए किया जाता है। आप इसे नए मॉडल पर सेट कर सकते हैं

Comments

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

— बोडोख

Answer 9

जैसा कि ऊपर उल्लेख किया गया है HTML में एक ही बटन में, आप डेटा-खारिज के साथ वर्तमान मॉडल को बंद करने और सीधे डेटा-लक्ष्य के साथ एक नया मोडल खोलने के लिए कह सकते हैं:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

लेकिन इससे स्क्रॉल-बार गायब हो जाएगा और आप देखेंगे कि यदि दूसरा मोडल पहले वाला था

तो समाधान इनलाइन शैली में निम्नलिखित शैली को जोड़ना है:

Style = "overflow-y : scroll ; "

Comments

मेरे लिए इसका काम: डी

— ग्लोरिया महाना

Answer 10

बूटस्ट्रैप 3 के साथ, आप यह कोशिश कर सकते हैं: -

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

के साथ काम करने के लिए परीक्षण किया गया: http://getbootstrap.com/javascript/#modals ("डेमो मोडल लॉन्च करें" पर क्लिक करें)।

Comments

मुझे नहीं लगता कि आपको .attrबिट की आवश्यकता है , क्या आप? क्या यह काम ठीक नहीं होगा? var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }।

— पॉल डी। वेट

Answer 11

मेरे पास एक ही समस्या है, और मेरा समाधान केवल तभी है जब मोडल संवाद में [भूमिका = "संवाद"] विशेषता हो:

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

Comments

jsfiddle.net/e6x4hq9h/7 मैंने यह कोशिश की और यह पहली बार काम करता है जब मैं मोडल खोलता हूं लेकिन बाद में नहीं।

— जोशुआ डिकर्सन

Answer 12

मैं @ ग्रेविटी कब्र के रूप में एक ही मुद्दा था जिसके द्वारा आप उपयोग करते हैं तो स्क्रॉल काम नहीं करता है

data-toggle="modal" data-target="TARGET-2" 

के साथ संयोजन के रूप में

data-dismiss="modal"

स्क्रॉल सही तरीके से काम नहीं करता है और मोडल के बजाय पेज को स्क्रॉल करने के लिए वापस लौटता है। यह डेटा-बर्खास्तगी के टैग से मॉडल-ओपन क्लास को हटाने के कारण है।

अंत में मेरा समाधान आंतरिक घटक के HTML को मोडल पर सेट करना और पाठ को / बाहर फीका करने के लिए सीएसएस का उपयोग करना था।

Answer 13

क्लिक फ़ंक्शन का उपयोग करना:

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

सचेत:

सुनिश्चित करें कि आप जो दिखाना चाहते हैं वह एक स्वतंत्र मोडल है।

Answer 14

पहले मोडल में:

नीचे दिए गए नज़दीकी लिंक के साथ पाद लेख में मोडल खारिज लिंक को बदलें।

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

दूसरे मोडल में:

फिर दूसरा मोडल नीचे दीव टैग के साथ शीर्ष div को प्रतिस्थापित करता है।

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Answer 15

एक ही मुद्दा था, यह लिखने के मामले में यहाँ किसी ने इस पर ठोकर खाई और कई modals के साथ मुद्दों है कि स्क्रॉल करने के लिए भी है (मैं बूटस्ट्रैप 3.3.7 का उपयोग कर रहा हूँ)

मैंने जो किया वह मेरे पहले मोडल के अंदर इस तरह का एक बटन है:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

यह पहले को छिपाएगा और फिर दूसरे को प्रदर्शित करेगा, और दूसरे मोडल में मेरे पास एक क्लोज बटन होगा जो इस तरह दिखेगा:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

तो यह दूसरा मोडल बंद कर देगा और पहले वाले को खोल देगा और स्क्रॉलिंग का काम करने के लिए मैंने अपने .css को इस लाइन में जोड़ा।

.modal {
overflow: auto !important;
}

पुनश्च: बस एक साइड नोट, आपके पास अलग-अलग तरीके के ये मोडल हैं, मामूली मोडल को पहले एक में छिपाया नहीं जा सकता क्योंकि आप पहले वाले को छिपाते हैं

तो यहां बूटस्ट्रैप मोडल उदाहरण के आधार पर पूर्ण उदाहरण दिया गया है:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 16

इसे इस्तेमाल करे

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

Comments

यह वास्तव में स्वीकृत समाधान से बेहतर है, क्योंकि कोई भी श्रोता हमेशा के लिए बंद मोडल इवेंट में बाध्य नहीं होगा।

— लुइस हेनरिक्स

Answer 17

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

Comments

$ ("# बटन")। क्लिक करें (फ़ंक्शन () {$ ('# modal_id_you_want_to_hid')। मोडल ('छिपाने'))); // जैसा कि ऊपर दिए गए बटन आईडी $ ("# बटनआईडी")। क्लिक करें (फ़ंक्शन () {$ ('# modal_id_You_Want_to_Show')। मोडल ({पृष्ठभूमि: 'स्थिर', कीबोर्ड: गलत)}})

— अजय कबरिया

Answer 18

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

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

Answer 19

यदि आप नया मोडल खोलते समय पहले से खोले गए मोडल को बंद करना चाहते हैं तो आपको इसे पहले ओपन मोडल को बंद करके जावास्क्रिप्ट / jquery से करना होगा और फिर इसे बंद करने की अनुमति देने के लिए एक 400ms का समय देना होगा और फिर नीचे दिए गए कोड की तरह नया मोडल खोलना होगा। :

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

यदि आप इसे करने की कोशिश करते हैं data-dismiss="modal"तो इसमें टिप मुद्दा होगा जैसा कि @gravity और @kuldeep ने टिप्पणियों में बताया है।

Answer 20

जवाब में से किसी ने भी मेरी मदद नहीं की क्योंकि मैं कुछ हासिल करना चाहता था जो कि प्रश्न में वर्णित के समान था।

मैंने इस उद्देश्य के लिए एक jQuery प्लगइन बनाया है।

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

संदर्भ के लिए काम कर रहे पहेली , JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

आपको बस मेरे नए एपीआई " showStackedModal()" के बजाय सिर्फ " modal('show')" का आह्वान करना होगा । छिपाने का हिस्सा अभी भी पहले जैसा ही हो सकता है और मोडल्स को दिखाने और छिपाने के स्टैक्ड दृष्टिकोण को स्वचालित रूप से ध्यान रखा जाता है।

Answer 21

बूटस्ट्रैप 3.x के लिए सरल और सुरुचिपूर्ण समाधान। इस तरह से एक ही मोडल का पुन: उपयोग किया जा सकता है।

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
}); 

Answer 22

यदि आप mdb का उपयोग करते हैं तो इस कोड का उपयोग करें

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }

Answer 23

<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />

Answer 24

मुझे इसमें थोड़ी देर हो सकती है लेकिन मुझे लगता है कि मुझे काम करने का हल मिल गया है।

आवश्यक -

jQuery

एक क्लोजिंग / बर्खास्तगी बटन वाले सभी मोडल इस प्रकार हैं -

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>  

कृपया बटन के वर्गों में जोड़ा गया क्लास क्लोज_मॉडल देखें

अब सभी मौजूदा मॉडल्स को बंद करने के लिए, हम कॉल करेंगे

$(".close_modal").trigger("click");

इसलिए, जहाँ भी आप एक मोडल खोलना चाहते हैं

बस उपरोक्त कोड जोड़ें और आपके सभी खुले मॉडल बंद हो जाएंगे।

फिर वांछित मोडल खोलने के लिए अपना सामान्य कोड जोड़ें

$("#DesiredModal").modal();

Answer 25

मोडल संवाद बॉक्स छिपाएँ।

विधि 1: बूटस्ट्रैप का उपयोग कर।

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

विधि 2: का उपयोग कर stopPropagation()।

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

विधि 3: दिखाए गए तरीके के बाद आह्वान करें।

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

विधि 4: CSS का उपयोग करना।

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

Answer 26

यह कोड, क्लोज मोडल ओपन हुआ, नया मोडल खुला, लेकिन अंदर से, नया मोडल बंद है।

$(nameClose).modal('hide');
$(nameOpen).modal('show');

अन्य बंद होने के बाद खुले नए मॉडल के लिए मेरा समाधान है:

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}

Answer 27

बस इस कोड को कॉपी और पेस्ट करें और आप दो मॉडल्स के साथ प्रयोग कर सकते हैं। पहला मोड बंद करने के बाद दूसरा मोडल खुला:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

चीयर्स!