我有一个模式,我通过变量提供它的内容信息。
<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();
});
最佳答案
请重新访问以下官方文档:
https://v4-alpha.getbootstrap.com/components/modal/#varying-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"。
另外在标题中添加一个类标题。希望我说清楚了。
关于javascript - 在页面加载时触发具有不同内容的相同模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46607530/