• 遮罩层样式及隐藏


    遮罩层样式,CSS:

      .add-pop-up-windows{
                position:fixed;
                _position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
                background:rgba(0,0,0,0.5);
                -moz-opacity:0.5;
                filter:alpha(opacity=50);
                z-index:3;
                display: none;
            }
            .add-pop-up-windows-content{
                background-color: white;
                width: 6.9rem;
                margin: 4.4rem .3rem 0 .3rem;
                border-radius: .1rem;
                padding: 0;
                font-family: "Microsoft YaHei";
            }

    html:

    <div class="aduit-ti-jiao">
        <button class="aduit-ti-jiao-left">驳  回</button>
        <button class="aduit-ti-jiao-right">通  过</button>
    </div>
    <div class="add-pop-up-windows" id="window">
        <div class="add-pop-up-windows-content" id="content">
            <div class="add-pop-up-windows-content-title">驳回原因:</div>
            <textarea class="add-pop-up-windows-content-textarea">必填</textarea>
            <div class="add-pop-up-windows-content-bottom">
                <div class="add-pop-up-windows-content-bottom-left">我再想想</div>
                <div class="add-pop-up-windows-content-bottom-right">确定</div>
            </div>
        </div>
    </div>

    点击背景,隐藏遮罩层,JavaScript:

    //弹窗显示
        $('.aduit-ti-jiao-left').click(function () {
            document.getElementById('window').style.display = 'block';
        });
        //弹窗隐藏
        $("#window").click(function (event) {
            $('#window').hide();
        });
        $('#content').click(function () {
            event.stopPropagation(); // 阻止事件向上冒泡
        });

     效果图:

  • 相关阅读:
    sql注入的防护
    mysql及sql注入
    机器学习之新闻文本分类。
    python导入各种包的方法——2
    爬去搜狐新闻历史类
    前端展示
    热词分析前端设计
    爬虫经验总结二
    爬虫经验总结一
    SpringBoot配置Druid数据库连接池
  • 原文地址:https://www.cnblogs.com/wanlibingfeng/p/11416865.html
Copyright © 2020-2023  润新知