js动态加载的蒙板弹框

时间: 2019-10-05阅读: 34标签: 弹框

我们访问一些网站时总会遇到这种点击后,背景像被打上一层模板一样,这个是怎么做到的呢?


它是将这个弹框div独立于页面容器wrap,设置position为absolute,将其水平垂直之后都居中,设置弹框div不显示,点击页面的登录按钮时,弹框div显示,并将页面容器的opacity设置0.5,下面的代码是完全动态加载的蒙板弹框。

window.onload = function(){
            Wrap = document.createElement("div")
            Wrap.style.height =  window.innerHeight+'px'
            Wrap.style.background='#06f'
            Wrap.innerHTML='<button id="button" onclick="ButtonClick()">确认</button>'
            document.body.appendChild(Wrap)

            Odiv = document.createElement("div")
            Odiv.style.border = "1px #ababab solid"
            Odiv.style.background = '#39f'
            Odiv.style.height = 200+'px'
            Odiv.style.width = 300+'px'
            Odiv.style.position = 'absolute'
            Odiv.style.top = '50%'
            Odiv.style.marginTop = -100 + 'px'
            Odiv.style.left = '50%'
            Odiv.style.borderRadius=5+'px'
            Odiv.style.marginLeft = -150+'px'
            Odiv.style.color = '#333'
            Odiv.style.index = 3

            document.body.appendChild(Odiv)

            Otitle = document.createElement('div')
            Left = document.createElement('div')
            ClearFixed = document.createElement('div')
            Right =  document.createElement('button')
            Left.innerHTML = '头部'
            Right.innerHTML = 'X'
            Right.setAttribute('id','Cancel')
            Left.style.float='left'
            Right.style.float = 'right'
            ClearFixed.style.clear = 'both'
            Otitle.appendChild(Left)
            Otitle.appendChild(Right)
            Otitle.appendChild(ClearFixed)
            Ocontent = document.createElement('div')
            Ocontent.innerHTML='显示内容'
            Otitle.style.padding = 10+'px'
            Otitle.style.borderBottom = '1px #ababab solid '
            Ocontent.style.padding = 10+'px'
            Odiv.appendChild(Otitle)
            Odiv.appendChild(Ocontent)
            Odiv.style.display = 'none'
        }
        function ButtonClick(){
            Odiv.style.display = 'block'
            Wrap.style.background='#ccc'
            Wrap.style.opacity='0.2'

            Cencel = document.getElementById('Cancel')
            Cencel.onclick = function(){
                Odiv.style.display = 'none'
                Wrap.style.background='#06f'
                Wrap.style.opacity='1'
            }
        }


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/6268

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全