遮罩层实现方式二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #login-register span{
                display: inline-block;
                padding: 6px 10px;
                background: #E3E3E3;
                cursor: pointer;
            }

            #mask{
                height: 2000px;
                width: 100%;
                background: #666;

                position: fixed;
                top: 0;
                left: 0;

                opacity: 0.6;
                z-index: 100;
            }

            #loginPage{
                width: 430px;
                height: 295px;
                background: url(img/TencentLogin.png) no-repeat;

                position: fixed;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: 1000;
            }

            #close{
                float: right;
                height: 30px;
                width: 30px;
                margin: 10px 10px 0 0;
                background: url(img/close.png) no-repeat;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="login-register">
            <span id="login">登录</span>
            <span id="register">注册</span>
        </div>
        <!--遮罩层-->
        <!--<div id="mask">

        </div>-->
        <!--登录页面-->
        <!--<div id="loginPage">
            <span id="close"></span>
        </div>-->
    </body>
    <script type="text/javascript">
        var login = getId("login");
        var register = getId(register);

        //登录按钮的点击事件
        login.addEventListener(‘click‘,showLogin);

        function showLogin(){
            //创建遮罩层
            var mask = document.createElement(‘div‘);
            //给遮罩层设置id
            mask.id = "mask";
            //设置遮罩层的大小
            var mh = screen.height + "px";
            var mw = screen.width + "px";//需要自己加单位,通过screen.width或screen.availWidth获取到的只是数值,并不带单位
//            alert(mh)
            mask.style.height = mh;
            mask.style.width = mw;

            //将遮罩层添加到页面中
            document.body.appendChild(mask);

            //创建登陆框
            var loginPage = document.createElement(‘div‘);
            loginPage.id = "loginPage";

            //创建X
            var close = document.createElement(‘span‘);
            close.id = "close";
            //将X添加到loginPage登陆框中
            loginPage.appendChild(close);

            document.body.appendChild(loginPage);

            //X的事件
            close.addEventListener(‘click‘,closeLogin);
            //点击遮罩层关闭登陆框
            mask.addEventListener(‘click‘,closeLogin);

            function closeLogin(){
                loginPage.style.display = "none";
                mask.style.display = "none";
            }

        }

        //通过函数封装通过id获取元素
        function getId(id){
            return document.getElementById(id);
        }
    </script>
</html>

原文地址:https://www.cnblogs.com/menglong1214/p/9561316.html

时间: 2024-10-11 11:21:04

遮罩层实现方式二的相关文章

遮罩层实现方式一

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #login-register span{ display: inline-block; padding: 6px 10px; background: #E3E3E3; cursor: pointer

转【js &amp; jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

/*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0);z-index:5;"

【js &amp; jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法,总不能把href="",更何况我是走的onclick函数 所以百度了一下,然后看到有用遮罩实现的,源代码有bug,然后按照它的思路自己重写了一下 --------- 下面粘一下代码吧,这个遮罩层实现法其实就是在当前元素外wrap一个层,层内增加一个z-index比较大的透明层,直接罩住原来

Jquery超简单遮罩层实现代码

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: [html] view plain copy print? <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opa

Winform应用程序实现通用遮罩层二

之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友好的另一种实现方案,废话不多说,直接进入主题. 一.实现思路(解决问题顺序): 透明遮罩: 1.实现可设置透明的Panel控件(MaskPanel): 2.Panel控件(MaskPanel)能够覆盖父容器(一般是当前窗体form对象)客户区区域(即:与父容器客户区区域大小相同),并处于最上层,保证父容器上的

android开发步步为营之51:弹出窗及遮罩层的几种实现方式

需要做一个弹出窗或者遮罩层,我们一般有以下几种思路. 1.AlertDialog对话框 2.PopupWindow弹出窗 3.WindowManager动态添加View到当前页面 4.打开另外一个Activity 下面分别给出这几种方法的实现栗子. 一.AlertDialog 适合需要用户做出选择,或者确认的弹出小窗 AlertDialog.Builder dialog = new AlertDialog.Builder(TestActivity.this); //自定义 //dialog.se

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

jQuery弹出遮罩层效果完整示例

<!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-

在弹窗中新建一个遮罩层

一.mask-div 在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西. 实现后的效果: 当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗. 二.设置遮罩层样式  要实现遮住全屏,可以这样来设置属性,兼容FF.chrome #mask-div{background-color:black; position:fixed;