一个DIV小弹窗 JS实现

最新推荐文章于 2022-12-01 17:25:18 发布

weixin_33802505

最新推荐文章于 2022-12-01 17:25:18 发布

阅读量213

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/aidaidai/blog/2051586

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天，试了一个小弹窗功能，可以在新增之类的方面加入。

代码如下：

CSS样式，放<head>中

 <style type="text/css">
#topCoverDiv
        {
            opacity: 0.4;
            position: absolute;
            width: 300%; /*阴影大小*/
            height: 500%;
            top: 0px;
            background-color: #000;
            z-index: 100;
        }
#dia
        {
            clear: left;
            float: left;
            background: rgba(0,0,0,0.5);
            z-index: 100;
            position: absolute;
            top: 5%; /*外相对距离*/
            left: 20%;
            width: 600px; /*大小高度*/
            height: 400px;
            margin: -20px 0 0 -25px; /*内相对距离*/
            border-radius: 10px; /*外框润滑度*/
            border-top-width: 10px;
            padding: 10px 10px 10px 10px; /*内框距离*/
        }
</style>

<body>中控件

<a onclick="test()">新增</a>
//引用方法



/*弹窗*/
<div id='dia' style="display: none;">
            <div style="background-color: #fff; opacity: 1; z-index: 19891015;" class="xubox_main">
                <div class="xubox_title" style="background: rgb(219, 219, 219);" move="ok">
                    <em id="LittleTitle">新增</em> <a onclick='test()' style="font-size: 18px; 
                        margin-left: 480px; cursor: default;">X</a>
                </div>
                <div>
                    <iframe src='ShenHeIntegration.aspx' name="If1" style="width: 500px; height: 
                       350px;">//iframe弹窗
                    </iframe>
                </div>
            </div>
        </div>

JS代码实现

<script type="text/javascript">
    
    function test() {
        var maskBg = document.getElementById('topCoverDiv')
        var dia = document.getElementById('dia')
        maskBg.style.display = (maskBg.style.display == 'none') ? 'block' : 'none';
        dia.style.display = (dia.style.display == 'none') ? 'block' : 'none';
    }
</script>

这样就完成了一个界面小弹窗功能。

完整html代码如下：

<html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        #topCoverDiv
        {
            opacity: 0.4;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            background-color: #000;
            z-index: 100;
            text-align: center;
        }
        
        #dia
        {
            clear: left;
            float: left;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin: -200px 0 0 -250px;
            border-radius: 10px;
            border-top-width: 10px;
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <a onclick='test()' >点我</a>
<div id='topCoverDiv' style="display: none;">
    </div>
    <div id='dia' style="display: none;">
        <div style="background-color: #fff; opacity: 1; z-index: 19891015;" class="xubox_main">
            <div class="xubox_title" style="background: rgb(219, 219, 219);" move="ok">
                <em id="LittleTitle">新增</em> <a onclick='test()' style="font-size: 18px; margin-left: 480px;
                    cursor: default;">X</a>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    function test() {
        var maskBg = document.getElementById('topCoverDiv')
        var dia = document.getElementById('dia')
        maskBg.style.display = (maskBg.style.display == 'none') ? 'block' : 'none';
        dia.style.display = (dia.style.display == 'none') ? 'block' : 'none';
    }
</script>

可以去试试

转载于:https://my.oschina.net/aidaidai/blog/2051586