मेरे पास एक मोडल है, जिसे मैं चर के माध्यम से इसकी सामग्री की जानकारी खिलाता हूं।

<div id="myModal">
 <div id="outer">
  <div id="inner">
   <div id="top">Headline</div>
    <span><img class="btnClose bCancel" src="#"></span>
   <div class="modalCnt"></div>
    <div class="btn">
     <span class="btnText">OK</span>
    </div>
  </div> <!-- Inner -->
 </div> <!-- Outer -->
</div> <!-- Close myModal -->

मेरी समस्या यह है कि मैं पॉपअप करने के लिए आवश्यक सभी अलग-अलग संदेशों के लिए एक ही मोडल का उपयोग करता हूं। और पेज लोड पर मुझे उन संदेशों की आवश्यकता होती है जिन्हें पॉपअप करने की आवश्यकता होती है, लेकिन केवल एक ही दिखाई देता है, जिसे अंतिम मोडल कहा जाता है। क्या कॉल को कतारबद्ध करने का कोई तरीका है ताकि पहला मोडल दिखाया जा सके और फिर दूसरा?

$( document ).ready(function() {
    modalHead.html("<h3>Headline 1</h3>");
    modalContent.html("<p>Content 1</p>");
    modal.show();

    modalHead.html("<h3>Headline 2</h3>");
    modalContent.html("<p>Content 2</p>");
    modal.show();
});
1
hbrovell 6 अक्टूबर 2017, 17:00

3 जवाब

सबसे बढ़िया उत्तर

प्रयत्न:

function new_modal(head, content){

    var random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span><img class="btnClose bCancel" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
        '<div class="btn">' +
         '<span class="btnText">OK</span>' +
        '</div>' +
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);

    return 'myModal_' + random;

}

$( document ).ready(function() {
    modal1 = new_modal("<h3>Headline 1</h3>", "<p>Content 1</p>");
    $('#' + modal1).show();
    modal2 = new_modal("<h3>Headline 2</h3>", "<p>Content 2</p>");
    $('#' + modal2).show();
});

आशा है कि इससे सहायता मिलेगी

0
Rodrigo Laisequilla Ramos 6 अक्टूबर 2017, 22:43

कृपया निम्नलिखित आधिकारिक दस्तावेज़ीकरण पर दोबारा गौर करें:

https://v4-alpha.getbootstrap.com/components/modal/#variing-modal-content

यह काफी स्पष्ट और सुरुचिपूर्ण समाधान है।

<script>
$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var header = button.data('header')
  var content = button.data('content')
  var modal = $(this)
  modal.find('.modal-title').text(header)
  modal.find('.modal-modalCnt').val(content)
})
</script>

और जब आप मोडल को ट्रिगर करते हैं तो data-header="your_header" data-content="your_content" पास करें।

साथ ही अपने हेडर में एक क्लास टिटल जोड़ें। आशा है कि मैं स्पष्ट था।

1
Santiago M. Quintero 20 फरवरी 2018, 01:02

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

if modal1 {
modalHead.html("<h3>Headline 1</h3>");
modalContent.html("<p>Content 1</p>");
modal.show();
}
else if modal 2 {
modalHead.html("<h3>Headline 2</h3>");
modalContent.html("<p>Content 2</p>");
modal.show();
}
else {
//default part
}
0
Kartik Puri 6 अक्टूबर 2017, 17:31