1.一个按钮点击弹窗
<asp:Button runat="server" ID="btnOpenTow"
Text="框条贴纸双筛选" OnClientClick="showPopup();return false;"/>
//弹窗
function showPopup() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
}
//原生CSS前端页面展示
<style type="text/css">
/* 遮罩层样式 */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
z-index: 999; /* 使其在顶层弹窗下方 */
}
/* 弹窗样式 */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
background-color: white;
z-index: 1000; /* 保证弹窗在遮罩层之上 */
width: 310px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* 弹窗内容 */
.popup-content {
padding: 20px;
text-align: center;
}
/* 关闭按钮样式 */
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 25px;
font-weight: bold;
}
h3 {
font-size: 16px;
font-weight: bold;
}
</style>
2.弹窗样式加中间遮罩层
//遮罩层
<div id="overlay" class="overlay"></div>
//弹窗样式
<div id="popup" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup()">×</span>
<h3>查询条件</h3>
<br/>
<label for="searchTerm" style="font-size:15px"><span style="color: red">*</span>请输入框条:</label>
<input type="text" id="searchTerm" style="height: 25px;font-size:14px"/>
<br/> <br/>
<label for="searchStickers" style="font-size:15px"><span style="color: red">*</span>请输入贴纸:</label>
<input type="text" id="searchStickers" style="height: 25px;font-size:14px"/>
<br/> <br/>
<button onclick="search()" style="text-align: center; width: 70px; cursor: pointer; background: green; border: green; font-weight: bold; color: whitesmoke;height: 27px">查 询</button>
</div>
</div>
3.后端传参及隐藏查询按钮
<asp:HiddenField ID="hfSearchTerm" runat="server" />
<asp:HiddenField ID="hfSearchStickers" runat="server" />
<%-- 隐藏查询条件 --%>
<div style="display: none">
<asp:Button runat="server" ID="btnSearchTow" OnClick="btnSearchTow_OnClick"/>
</div>
4.前端HiddenField赋值及触发按钮
<script type="text/javascript">
function search() {
var searchTerm = $("#searchTerm").val();
var searchStickers = $("#searchStickers").val();
if (searchTerm == "" || searchStickers == "") {
window.alert("框条以及贴纸均不可为空!!!");
showPopup(); // 保持弹窗显示
// 停止事件冒泡并阻止默认行为
event.preventDefault();
event.stopPropagation();
return false; // 阻止进一步执行
}
// 将值设置到隐藏字段
$("#<%= hfSearchTerm.ClientID %>").val(searchTerm);
$("#<%= hfSearchStickers.ClientID %>").val(searchStickers);
$("#btnSearchTow").click();
closePopup();
}
</script>