login表单弹出效果制作与实现

来源：互联网发布：印度同志聊天软件编辑：程序博客网时间：2024/05/01 19:02

如何做出弹出菜单的效果，想了很久，

先从html写法上改进。

li#loginContainer>a#loginButton>span <!—表单注册的按钮--!>

div#loginBox>form#loginForm>fieldset <!—表单部分--!>

中心思想，就是把注册的按钮和表单写在一起。。。。

然后，在css上的写法

可以把#loginBox的位置写死，position：absolute。。。，而# loginButton因为需要全局自适应排版位置应该写成relative。#loginBox的z-index应该比# loginButton的值大，因为#loginBox要在堆叠在上层。

最后，写juery插件。

$(function(){

Varbutton = $(‘#loginButton’);

Var box = $(‘#loginBox’);

Var form = $(‘#loginForm’);

button.removeAttr(‘href’); //删除href属性

button.mouseup(function(){

box.toggle();

//toggle用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click事件。

//如何可见变成比可见，不可见变成可见

box.toggleClass(‘active’);

//如果存在（不存在）就删除（添加）一个类。

});

form.mouseup(function(){

return false; //form属性默认为false

});

//如果在loginButton中有子元素，隐藏注册表单并去掉active类

$(this).mouseup(function(login){

If(!($(login..target).parent(#loginButton).length>0)){

button.removeClass(‘active’);

box.hide()

}

})

});

借鉴一下模态弹窗的代码

<!DOCTYPE html>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

.black_overlay {

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

z-index: 1001;

background: black;

opacity: 0.45;/*//指定对象的不透明度*/

/* filter: Alpha(Opacity=50);*/

}

.firstScan_main {

display: none;

position: absolute;

top: 10%;

left: 5%;

width: 88%;

/*height: 191.5px;*/

border: 1px solid #FFFFFF;

background-color: #FFFFFF;

z-index: 1002;

overflow: auto;

border-radius: 20px;

color: #FFFFFF;

font-size: 12px;

padding: 0px;

}

.firstScan-content {

margin: 0px;

height: 185px;

}

.firstScan-left {

width: 40%;

float: left;

}

.firstScan-left>img {

padding-top: 15px;

padding-left: 15%;

}

.firstScan-right {

width: 57%;

float: left;

}

.firstScan-right-top {

color: #AEADAD;

font: bold 22px "微软雅黑";

width: 80%;

padding-left: 20%;

padding-top: 19%;

}

.firstScan-right-bottom {

border: 1px solid #ffffff;

background-color: #00A79D;

width: 66%;

height: 28px;

line-height: 28px;

border-radius: 6px;

text-align: center;

margin-left: 20%;

margin-top: 10px;

}

.firstScan-foot {

background-color: #00A79D;

width: 100%;

height: 24px;

line-height: 24px;

text-align: center;

clear: both;

border-radius: 1px;

}

.rescan_main {

display: none;

position: absolute;

top: 10%;

left: 5%;

width: 88%;

height: 202.5px;

border: 1px solid #FFFFFF;

background-color: #FFFFFF;

z-index: 1002;

overflow: auto;

border-radius: 20px;

color: #FFFFFF;

font-size: 12px;

padding: 0px;

}

.reScan-right-top {

color: #AEADAD;

font: bold 16px "微软雅黑";

width: 80%;

padding-left: 10%;

padding-top: 30px;

}

.firstScan-right-middle {

color: #AEADAD;

font: bolder 13px "微软雅黑";

width: 80%;

padding-left: 10%;

padding-top: 8px;

text-align: center;

}

</style>

function openWindow(scanLog) {

if (scanLog == 1) {

document.getElementById('light1').style.display = 'block';

} else {

document.getElementById('light2').style.display = 'block';

}

document.getElementById('fade').style.display= 'block';

}

function closeWindow(id) {

document.getElementById(id).style.display = 'none';

document.getElementById('fade').style.display = 'none';

}

</script>

</head>

<bodyonload="openWindow(2)">

<p>可以根据自己要求修改css样式</p>

</body>

</div>

弹窗效果<br/>练习1

</div>

<div class="firstScan-right-bottom"onclick="closeWindow('light1')">点击后效果消失</div>

</div>

<div class="firstScan-foot">模态弹窗练习</div>

</div>

</div>

弹窗内容1:<br />

<spanid="showScanLog"> 弹窗内容2</span>

</div>

<div class="firstScan-right-bottom"onclick="closeWindow('light2')">点击后效果消失</div>

</div>

<div class="firstScan-foot">模态弹窗练习</div>

</div>

</html>

0 0