HTML + CSS + JQuery实现弹框

最新推荐文章于 2024-08-06 10:37:21 发布

JarvisH

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量1.7k

点赞数

分类专栏： UI 文章标签： jquery html css

本文链接：https://blog.csdn.net/hwj528/article/details/78792105

版权

UI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML + CSS + JQuery实现弹框
CSS

   <style type="text/css">
    #fullbg {
        background-color: gray;
        left: 0;
        opacity: 0.6;
        position: absolute;
        top: 0;
        z-index: 50000;
        filter: alpha(opacity = 50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
    }

    #dialog {
        left: 43%;
        margin: -200px 0 0 -200px;
        position: fixed !important; /*  浮动对话框 */
        position: absolute;
        top: 30%;
        z-index: 100000;
        display: none;
    }
</style>

HTML

<div id="fullbg"></div>
<div id="dialog">
    <div id="remarkDiv"
        style="margin-left: 0px; width: 100%;background-color: #e5e5e5;border-radius:10px;">
        <div id="dialogTitleDiv" style="background-color:#a7c0ce;border-radius:10px 10px 0 0;height:40px;font-size:20px;font-weight:bold;padding-top:15px;" align="center">
            备注
        </div>
        <div id="dialogContentDiv" style="padding:20px 10px 0 10px;">
            <textarea rows="5" style="width:350px;" id="auditRemark"></textarea>
        </div>
        <span  align="center" name='errMsgTip' style="display:block;color:red;"></span>
        <div align="center" bgcolor="#cccccc">
            <input type="button" value="关闭" style="width:120px;margin-bottom:15px;"  onclick="closeBg()" class="btn" />
            <input type="button" value="提交" style="width:120px;margin-bottom:15px;"  onclick="" class="btn" />
        </div>
    </div>
</div>

JQuery

<script type="text/javascript">                
    function showBg() {
        $("#dialog").show();
        $("#remarkDiv").show();
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbg").css({
            height : bh,
            width : bw,
            display : "block"
        });
    }

    //关闭灰色 jQuery 遮罩
    function closeBg() {
        $("#fullbg,#dialog").hide();
        $("[name='errMsgTip']").text('')
    }
</script>