在页面加载时使用不同的内容触发相同的模式

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

再加一个类标题到你的标题。希望我清楚。