[英]Fire the same modal with different content at page load
我有一个模态,我通过变量提供它的内容信息。
<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/#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" 。
另外在你的标题中添加一个类标题。 希望我很清楚。
您正在做的是一次使用 2 个不同的模态数据调用相同的函数。 所以如果我们按照 function 的流程走,它会在最后一行完成执行。 所以这就是为什么它显示最后一个模式,所以你可以做的是使用 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
}
尝试:
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();
});
希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.