Troubleshooting: Refresh the parent window after closing the modal window

1. Modal windows and non-modal windows
2. Pop up modal window
3. Other refresh the parent window (the modal window page and the parent window are not on the same page)

1. Modal windows and non-modal windows

Modality and non-modality are mainly reflected in whether to "block" the application.
- Modal: After the window pops up,Blocks the application's window, making it inoperable;
- Non-modal: Does not block the application's window, and the two can operate independently.
After the dialog box is displayed
- Modal dialog box: Yescannot be used in the same programto operate other windows.
- Modeless dialog boxes can also operate on other windows of the same program.

2. Pop up modal window

2.1 Achieve results

as follows:

2.2 Implementation code

2.2.1 Refresh the parent window

The modal box and the parent window are in one html. To refresh, you can directly use the following code, as follows:
```
// 刷新父窗口
window.location.reload();
```

2.2.2 Complete code

as follows:

<!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>
	<!-- <button οnclick="openModalHtml()">打开模态框页面</button> -->

	<!-- 遮罩层 -->
	<div class="modal-overlay"></div>

	<!-- 模态框 -->
	<div class="modal">
		<!-- 关闭按钮 -->
		<span class="modal-close">&times;</span>
		<!-- 模态框内容 -->
		<h2>这是一个模态框</h2>
		<p>模态框中的内容可以根据需要进行更改。</p>
	</div>

	<!-- 引入jQuery库 -->
	<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();
			});
		});

		// function openModalHtml(){
        
        
		// 	window.open('myModal.html', 'modal22', 'height=300,width=500');
		// }
	</script>
</body>
</html>

2.3 Reference

Handwritten modal box, pop-up box or mask layer.

3. Other refresh the parent window (the modal window page and the parent window are not on the same page)

3.1 Implementation code

3.1.1 Core code

as follows:

window.name = “__self”; 
window.open(window.location.href, “__self”) //注意是2个下划线

3.1.2 Refreshing multi-layer modal windows

as follows:

3.2 Reference

As follows:
javascript showModalDialog Multi-layer modal window implements page submission and multi-layer modal window implements page submission and refresh code Refresh code.

Troubleshooting: Refresh the parent window after closing the modal window

Troubleshooting: Refresh the parent window after closing the modal window

1. Modal windows and non-modal windows

2. Pop up modal window

2.1 Achieve results

2.2 Implementation code

2.2.1 Refresh the parent window

2.2.2 Complete code

2.3 Reference

3. Other refresh the parent window (the modal window page and the parent window are not on the same page)

3.1 Implementation code

3.1.1 Core code

3.1.2 Refreshing multi-layer modal windows

3.2 Reference

Guess you like