在不重新加载页面的情况下重置Bootstrap模式窗口,可以通过以下步骤实现:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal-body" id="modalContent">
Modal Content
</div>
$(document).on('click', '.btn-primary', function() {
$.ajax({
url: 'reset_modal_content.php', // 替换为获取新内容的URL
type: 'GET',
success: function(response) {
$('#modalContent').html(response);
}
});
});
<?php
// 处理获取新内容的逻辑
$newContent = "New Modal Content";
echo $newContent;
?>
通过以上步骤,当点击打开模式窗口的按钮时,会触发AJAX请求,获取新的内容并替换到模式窗口中,实现在不重新加载页面的情况下重置Bootstrap模式窗口的内容。
领取专属 10元无门槛券
手把手带您无忧上云