html 弹窗_html弹窗-CSDN博客

本文链接：https://blog.csdn.net/Mike_lucy/article/details/130371006

该代码示例展示了如何使用HTML和CSS创建一个固定定位的遮罩层以及一个可弹出的窗口，窗口包含审核信息的输入和提交功能。JavaScript函数用于显示和隐藏弹窗，以及处理用户交互，如按钮点击事件。

摘要由CSDN通过智能技术生成

页面代码+css样式设置


<style>
    .zhezhao1 {
        position: fixed;
        left: 50%;
        top: 50%;
        /*background: gray;*/
        transform: translate(-35%, -30%);
        width: 100%;
        height: 100%;
        z-index: 200;
        /*opacity: 0.3;*/
    }

    .tankuang1 {
        /*position: absolute;*/
        background: #fff;
        width: 35%;
        height: 43%;
        border-radius: 5px;
        margin: 15% auto;
        transform: translate(-50%, -50%);
        z-index: 200;
        opacity: 1;
    }

    .content input:hover {
        cursor: pointer;
    }

    .content label:hover {
        cursor: pointer;
    }
</style>
<div style="background-color:aliceblue;width:100%;height:100%">
    <input type="button" onclick="dianwo('zhezhao1')" name="name" value="弹窗" />
    <!-- 弹窗 -->
    <div class="zhezhao1" id='zhezhao1'>
        <div class="tankuang1">
            <div>
                <i class="layui-icon layui-icon-close" style="font-size: 25px; position: absolute; top: 13px; right: 13px; cursor: pointer;" onclick="hidder('zhezhao1')"></i>
            </div>
            <div id="adddivtest">
                <div class="title">
                    <br />
                    <h3>审核录入信息</h3>
                </div>
                <div class="content" style="margin: 30px auto;">
                    <input type="text" hidden="hidden" id="auditstatus" name="name" value="" />
                    <input type="radio" name="audit" id="audit1" value="" /><label for="audit1">&nbsp;&nbsp;通过</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="audit" id="audit2" value="" /><label for="audit2">&nbsp;&nbsp;未通过</label>
                    <br />
                    <textarea id="auditcause" class="form-control form-control-lg" style="display: none; width: 300px; height: 200px; margin: 20px auto" placeholder="审核未通过原因" rows="10" cols="50"></textarea>
                    <br />
                    <input class="btnOrangeBig" onclick="upd_auditstatus()" type="button" name="name" value="提交" /> 
                    <input class="btnOrangeBig" onclick="hidder('zhezhao1')" type="button" name="name" value="关闭" /> 
                    
                </div>
            </div>
        </div>
    </div>
    <!-- 背景遮罩 -->
    <div class="layui-layer-shade none" id="beijin" style="display: none; z-index: 100; background-color: rgb(0, 0, 0); opacity: 0.3;position:absolute">
    </div>
</div>

<script type="text/javascript">
    document.getElementById('zhezhao1').style.display = "none";
    //关闭弹窗
    function hidder(id) {
        document.getElementById(id).style.display = "none";
        $("#beijin").hide();
    }
    function dianwo(divid) {
        document.getElementById(divid).style.display = "";
    }
</script>