简单的遮罩层加登录窗效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的遮罩层加登录窗效果相关的知识,希望对你有一定的参考价值。

技术分享

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>遮罩层加登录窗</title>

<style type="text/css">

#wrap{width: 60px;height: 30px;

position: absolute;

text-align: center;

line-height: 30px;

right: 100px;top: 50px;

cursor: pointer;}

#mask{

position: fixed;

width: 100%;

height: 100%;

background: #000;

left: 0;top: 0;

opacity: 0.3;

display: none;}

#login{width: 400px;height: 300px;

border: 2px solid #333;

position: fixed;

left: calc(50% - 200px);

top: calc(50% - 150px);

background: #fff;

display: none;}

#login div{display: inline-block;float: right;}

#left{width: 40px;height: 40px;

text-align: center;

line-height: 40px;

font-size: 30px;

cursor: pointer;}

#right{width: 360px;height: 40px;

line-height: 40px;

text-indent: 2em;}

</style>

</head>

<body>

<img src="img/1.jpg">

<div id="wrap">

登录

</div>

<div id="mask"></div>

<div id="login">

<div id="left">×</div>

<div id="right">登录窗</div>

</div>

<script type="text/javascript">

var wrap = document.getElementById(‘wrap‘);

var mask = document.getElementById(‘mask‘);

var login = document.getElementById(‘login‘);

var left = document.getElementById(‘left‘);

 

wrap.onclick = function(){

mask.style.display = ‘block‘;

login.style.display = ‘block‘;

}

left.onclick = function(){

mask.style.display = ‘none‘;

login.style.display = ‘none‘;

}

</script>

</body>

</html>

以上是关于简单的遮罩层加登录窗效果的主要内容,如果未能解决你的问题,请参考以下文章

在flash中怎么做漂亮的遮罩?为啥我每次做之后 被遮罩层都显示不出来

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

为啥flash中被遮罩层是图形时显示不出来

一个简单的遮罩层

SuperSlide滚动的遮罩层宽/高怎么计算的?如何设置具体一个值?

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