
[英]How to hide a bootstrap modal on the previous page if user comes in clicking BACK?
[英]Bootstrap modal with "Previous" button to go back a page within modal?
我正在构建一个在模态内部具有导航选项卡的模态,其中这些导航选项卡实际上会将您带到相同的模态,只是显示不同的数据。 因此,当单击导航选项卡中的项目时,当前模式只会被新数据覆盖。
我真的希望能够在我的模态底部添加一个“上一个模态”按钮,以将用户重定向回他们之前所在的上一个模态 state。 我想知道是否有一种方法来操作 DOM,以存储以前 state 的模态,并在单击“上一个模态”按钮时返回该数据。
这是 function,每次“打开模式”单击都会调用它。
function openModal(url_link) {
// Get correct URL
link = url_link.data("link-url");
$("#myModal .modal-content-area").hide();
// Open modal
$('#myModal').modal('show');
// Get URL's data
$.get("customurlhere.com", function( data ) {
// Load new data each time modal is clicked
$("#myModal .modal-content-area").html(data);
$("#myModal .modal-link").on( "click", function() {
openModal($(this));
});
// show content
$("#myModal .modal-content-area").show();
});
}
// Open links within modal
$(".modal-link").on( "click", function() {
myModal($(this));
});
模态所在的位置,以及数据被注入的位置。
<div class="modal fade"role="dialog" id="modal">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="modal-content-area"></div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" data dismiss="modal">Close</button>
<button>*** Previous Modal Button would go here ****</button>
</div>
</div>
</div>
</div>
</div>
我一直在敲我的头好几次。 什么都有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.