疑难杂症 之 关闭模态窗口之后刷新父窗口
移动开发
2023-12-16 22:33:33
阅读次数: 0
1. 模态窗口 与 非模态窗口
- 模态与非模态,主要就是体现在是否“阻塞”应用程序上。
- 模态:在该窗口弹出后,会阻塞应用程序的窗口,使其不可操作;
- 非模态:不会阻塞应用程序的窗口,两者可独立操作。
- 对话框在显示之后
- 模态对话框:就是不能对同一个程序中的其它窗口进行操作。
- 非模态对话框,还可以对同一个程序的其它窗口进行操作。
2. 弹出模态窗口
2.1 实现效果
- 如下:
2.2 实现代码
2.2.1 刷新父窗口
2.2.2 完整代码
- 如下:
<!DOCTYPE html>
<html>
<head>
<title>Modal Window Example</title>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
width: 600px;
height: 620px;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="open-modal">弹出模态框</button>
<div class="modal-overlay"></div>
<div class="modal">
<span class="modal-close">×</span>
<h2>这是一个模态框</h2>
<p>模态框中的内容可以根据需要进行更改。</p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('#open-modal').click(function() {
$('.modal-overlay').fadeIn();
$('.modal').fadeIn();
});
$('.modal-close, .modal-overlay').click(function() {
$('.modal-overlay').fadeOut();
$('.modal').fadeOut();
window.location.reload();
});
});
</script>
</body>
</html>
2.3 参考
3. 其他刷新父窗口(模态窗口页面与父窗口不在同一页面)
3.1 实现代码
3.1.1 核心代码
3.1.2 多层模态窗口实现刷新
- 如下:
3.2 参考
转载自blog.csdn.net/suixinfeixiangfei/article/details/134797685