ASP.NET原生JS+HTML+CSS写法

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()">&times;</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>