ul加遮罩html,弹出层加遮罩

~~~

.login-header {

width: 100%;

text-align: center;

height: 30px;

font-size: 24px;

line-height: 30px;

}

ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {

padding: 0px;

margin: 0px;

}

.login {

width: 512px;

height: 280px;

position: absolute;

border: #ebebeb solid 1px;

left: 50%;

right: 50%;

background: #ffffff;

box-shadow: 0px 0px 20px #ddd;

z-index: 9999;

margin-left: -256px;

margin-top: 140px;

display: none;

}

.login-title {

width: 100%;

margin: 10px 0px 0px 0px;

text-align: center;

line-height: 40px;

height: 40px;

font-size: 18px;

position: relative;

cursor: move;

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit浏览器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期浏览器*/

user-select:none;

}

.login-input-content {

margin-top: 20px;

}

.login-button {

width: 50%;

margin: 30px auto 0px auto;

line-height: 40px;

font-size: 14px;

border: #ebebeb 1px solid;

text-align: center;

}

.login-bg {

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: #000000;

filter: alpha(opacity=30);

-moz-opacity: 0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

display: none;

}

a {

text-decoration: none;

color: #000000;

}

.login-button a {

display: block;

}

.login-input input.list-input {

float: left;

line-height: 35px;

height: 35px;

width: 350px;

border: #ebebeb 1px solid;

text-indent: 5px;

}

.login-input {

overflow: hidden;

margin: 0px 0px 20px 0px;

}

.login-input label {

float: left;

width: 90px;

padding-right: 10px;

text-align: right;

line-height: 35px;

height: 35px;

font-size: 14px;

}

.login-title span {

position: absolute;

font-size: 12px;

right: -20px;

top: -30px;

background: #ffffff;

border: #ebebeb solid 1px;

width: 40px;

height: 40px;

border-radius: 20px;

}

点击，弹出登录框

登录会员

关闭

用户名：

登录密码：

登录会员

// 显示登录框和遮盖层

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

var bg = document.getElementById('bg');

//1 点击按钮，弹出登录框和遮盖层

var link = document.getElementById('link');

link.onclick = function () {

login.style.display = 'block';

bg.style.display = 'block';

return false;

}

// 2 点击关闭按钮，隐藏 登录框和遮盖层

var closeBtn = document.getElementById('closeBtn');

closeBtn.onclick = function () {

// 隐藏 登录框和遮盖层

login.style.display = 'none';

bg.style.display = 'none';

}

// 3 拖拽

var title = document.getElementById('title');

title.onmousedown = function (e) {

// 鼠标按下，求鼠标在盒子中的位置

var x = e.pageX - login.offsetLeft;

var y = e.pageY - login.offsetTop;

document.onmousemove = function (e) {

// 鼠标移动的时候， 盒子的坐标

var loginX = e.pageX - x;

var loginY = e.pageY - y;

login.style.left = loginX + 256 + 'px';

login.style.top = loginY - 140 + 'px';

}

}

document.onmouseup = function () {

// 移除鼠标移动的事件

document.onmousemove = null;

}

~~~