在頁面加載時使用不同的內容觸發相同的模式

Question

我有一個模式，我通過變量提供其內容信息。

<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(); 
}); 

Answer 1

嘗試：

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(); 
}); 

希望它有助於

Answer 2

你正在做的是一次調用2個不同模態數據的相同函數。所以如果我們按照函數的流程走，它會在最後一行完成執行。所以，這就是爲什麼它顯示的是上模，所以你可以做的是使用if - else條件，

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 
} 

Answer 3

請重溫下面的官方文檔：

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

很清楚和e legant解決方案。

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

再加一個類標題到你的標題。希望我清楚。