找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发弹出层效果

2018-12-06 22:00:21 分类：JavaScript 阅读(75) 评论(0)
手机前端开发教程
黑马前端开发教程
web前端开发教程视频

思路：
创建html
<div id=”mask”></div> 创建遮罩层阴影
<div id=”login”> 创建登录框
<div class=”loginCon”>
<div id=”close”></div> 创建关闭按钮
</div>
</div>
效果：点击登录按钮弹出登录框 登录框理由关闭按钮
关闭登录框两种形式：1点击关闭按钮 2点击遮罩层
css注意事项：层级关系 登录框层级大于遮罩层
遮罩层的高度等于页面高度
获取页面高度 document.body.scrollHeight
登录框相对窗口垂直水平居中用css就能实现，如登录框 .login-box{ width:500px; height:600px; position:fixed; top:50%; left:50%; margin-top:-300px;(自身高度的一半) margin-left:-250px;(自身宽度的一半)}

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>弹出层</title>
        <style type=”text/css”>
            #close {
                background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234021dt3rvxzt1lrl5phz.png)
                    no-repeat;
                width: 30px;
                height: 30px;
                cursor: pointer;
                position: absolute;
                right: 5px;
                top: 15px;
                text-indent: -999em;
            }
            #mask {
                background-color: #ccc;
                opacity: 0.5;
                filter: alpha(opacity=50);
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1000;
                width: 100%;
                display: none;
            }
            #login {
                position: fixed;
                z-index: 1001;
                left: 50%;
                top: 50%;
                margin-top: -190px;
                margin-left: -335px;
                display: none;
            }
            .loginCon {
                position: relative;
                width: 670px;
                height: 380px;
                background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234030lc9b0oc3za0qhogg.png)
                    #2a2c2e center center no-repeat;
                background-size: 100%;
            }
            .login-btn {
                font-family: 微软雅黑;
                width: 100px;
                height: 40px;
                background: rgb(201, 57, 74);
                text-align: center;
                display: block;
                line-height: 40px;
                font-size: 14px;
                opacity: 0.9;
                text-decoration: none;
                color: rgb(255, 255, 255);
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id=”header”>
            <div class=”container” id=”nav”>
                <div id=”login-area”>
                    <button id=”btnLogin” hidefocus=”true” class=”login-btn”>
                        登录
                    </button>
                </div>
            </div>
        </div>
        <div id=”mask”></div>
        <div id=”login”>
            <div class=”loginCon”><div id=”close”></div></div>
        </div>
        <script>
            window.onload = function() {
                var oMask = document.getElementById(‘mask’)
                var oClose = document.getElementById(‘close’)
                var oBtn = document.getElementById(‘btnLogin’)
                var oLogin = document.getElementById(‘login’)
                var oHeight = document.body.scrollHeight
                oMask.style.height = oHeight + ‘px’
                console.log(oHeight)
                oBtn.onclick = function() {
                    oMask.style.display = ‘block’
                    oLogin.style.display = ‘block’
                }
                oMask.onclick = oClose.onclick = function() {
                    oMask.style.display = ‘none’
                    oLogin.style.display = ‘none’
                }
            }
        </script>
    </body>
</html>
web前端开发文字教程
达内前端开发最新教程
web前端开发html教学视频教程下载
» 本文来自：前端开发者 » 《前端开发弹出层效果》
» 本文链接地址：https://www.rokub.com/6944.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论