kk Blog —— 通用基础

<style type='text/css'>
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 60%;
	background-color: #E8E8E8;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

.popup .close-btn {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 20px;
	color: black;
	cursor: pointer;
}
</style>

<div class="popup" id="popup" style='z-index:99;display:none;'>
<span class="close-btn">X</span>
<iframe id='n_iframe' src='' style='width:96%;height:100%; border: 1px solid #E8E8E8;'>
</iframe>
</div>

<script>
var closeBtn = document.querySelector(".close-btn");
closeBtn.addEventListener("click", function() {
	popup.style.display = "none";
	document.getElementById('n_iframe').src = '';
});

var popup = document.getElementById("popup");
function popup_it(url)
{
	window.frames[0].location.href = url;
	//popup.style.display = "block"; // 在子页面显示更好
}
</script>

<center>
<br>
<input style='width:150px;' name='zzfl_id_zgfl' id='zzfl_id_zgfl' value='显示中文名'>   
<input style='width:100px;' name='zzfl_id_sortid' id='zzfl_id_sortid' value='排序值'>   
<button class='submit' type='button' id='popup_b' onclick="popup_it('/blog/2023/10/21/lang-web-popup-2/')">弹窗选择</button>

</center>