这周学习了jquery的基本知识，DOM、事件、动画，刚好有个弹框效果要做。

实现功能是要求：在页面上点击图片“在线报名”，之后，屏幕变黑，半透明，正中间弹出一个对话框，里面包括报名信息，

用表单实现，右上角需要一个“关闭”。

首先，要确定html的布局，使用div放在

内部，代码如下：

之后，设置css样式：

body{

width: 100%;

height: 100%;

position: relative;

}/*弹框效果*/

#dialog-bg{

position:absolute;

top: 0;

left: 0;

z-index: 10000;

width: 100%;

height: 100%;

background-color:#000000;

opacity: 0.5;

filter:Alpha(opacity=50);/*透明度兼容*/

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

/*ie6中利用position和上面的这条语句，可以实现像fixed的效果*/display: none;

}

.dialog-box{

position: absolute;

z-index: 20000;

left: 50%;

top: 50%;

margin-left: -161px;

margin-top: -151px;

padding-left: 20px;

_margin-left: -161px;

_margin-top: -151px;

_padding-left: 20px;

width: 300px;

height: 300px;

border: 1px solid #f95;

background-color: #FFF0F5;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

display: none;

}

.dialog-title{

float: left;

width: 300px;

height: 40px;

}

.dialog-title p{

display: block;

float: left;

text-align: center;

width: 250px;

height: 40px;

line-height: 40px;

font-size: 18px;

font-weight: bold;

font-family: "宋体";

color: #000;

}

#close-dialog{

float: right;

margin-top: 5px;

_margin-top: 5px;

width: 50px;

height: 30px;

color: #f00;

font-size: 12px;

font-family: "宋体";

cursor:pointer;/*手型*/

}

.dialog-content{

float: left;

width: 300px;

height: 220px;

}

.form-info{

float: left;

margin-top: 10px;

_margin-top: 10px;

width: 300px;

height: 40px;

font-size: 16px;

font-family: "宋体";

color: #000;

}

.form-info input{

width: 150px;

height: 20px;

}

.form-info2{

float: left;

margin-top: 10px;

_margin-top: 10px;

width: 300px;

height: 100px;

font-size: 16px;

font-family: "宋体";

color: #000;

}

.form-info2 p{

display: block;

float: left;

margin-top: 0px;

_margin-top: 0px;

width: 80px;

height: 30px;

font-size: 16px;

font-family: "宋体";

color: #000;

}

.form-info2 textarea{

display: block;

float: left;

width: 170px;

height: 100px;

}

.form-info3{

float: left;

width: 300px;

height: 20px;

_margin-top: 10px;

_margin-top: 5px;

}

.form-info3 input{

display: block;

margin: 0 auto;

margin-top: 10px;

width: 50px;

height: 20px;

cursor:pointer;

}

插入js代码：

$(function(){

//点击图片，弹出对话框

$(".href2").click(function(){

$("#dialog-bg").show();

});

$(".href2").click(function(){

$(".dialog-box").show();

});

$(".href4").click(function(){

$("#dialog-bg").show();

});

$(".href4").click(function(){

$(".dialog-box").show();

});

$("span#close-dialog").click(function(){

$("div#dialog-bg").hide();

});

$("span#close-dialog").click(function(){

$(".dialog-box").hide();

});

});

注意：

布局应将半透明背景设为一个div，而对话框盒子设为另一个div，若把对话框盒子放在透明背景盒子中，则必须注意背景透明的设置方法！！虽然之前放入一个大背景中隐藏与显示，之后，调兼容性特别复杂，后来换了这种布局。

1、一般情况下，我们可以使用css的opacity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用。所以，上面，设置半透明背景时，不能直接使用opacity属性,使用RGBA更好(RGBA在RGB的基础上多了控制alpha透明度的参数)。

2、要实现整个屏幕都是半透明背景，定位，需要设置#dialog-bg的position:fixed;(“ie6不能兼容fixed”)

之前，布局是这样，所以要注意fixed的兼容性。

现在，

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

/*ie6中利用position和上面的这条语句，可以实现像fixed的效果*/

3、注意：背景盒子与对话框盒子的z-index属性值。后者的应比前者的大。

4、ie6与高版本的jquery不能兼容，jquery-1.8以下的可以。(之前看到有可能不能识别$,或者不能用$(function{

……})而应使用$(document).ready(function{

……})  )

5、jquery中动画功能：show() 和 hide()，hide()将所选元素的属性改为display：none；show()则将元素的样式设为先前的显示状态(除none外的值)。

6、ie6与rgba()的兼容性问题：

详细为以下链接：

可以使用

opacity: 0.5;

filter:Alpha(opacity=50);

或者：

rgba+filter实现兼容性的半透明背景效果

background:rgba(0,0,0,0.5);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

7、抓手型-CSS

加入属性：cursor:pointer;

8、JQuery:

将背景盒子和对话框盒子CSS都设为display:none；它们都是隐藏状态；

之后，对图片绑定click事件，调用show()可以显示了(整个屏幕变成半透明黑色，出现报名对话框)；

点击对话框上的关闭，触发hide()事件。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/10368.html

微信打赏

支付宝打赏

感谢您对作者Sylvia的打赏，我们会更加努力！    如果您想成为作者，请点我