需求:假设页面中存在多个按钮,每当点击这些按钮的时候就会弹出登陆的对话框。
比如说点击a按钮之后弹出登陆对话框,点击注册之后弹出注册框。
每一个按钮是通过a标签来做的,然后我们设置a标签的href属性为该标签对应应该弹出的对话框的id,这样每当a标签被点击的时候我们就可以从被点击的a标签中获取对应的弹出窗的id,另外需要意识到的一点是,因为这里的按钮是a标签,并且我们需要监听a标签的点击事件并作相应的逻辑处理,所以应该在监听事件的尾部取消事件的默认行为,使用ev.prevnetDefault() 或者return false。
为了实现这个功能,最好的做法是给这些按钮添加class属性,然后通过选择器选中这些按钮,然后使用each函数给这些按钮注册监听事件。
js代码的实现逻辑分析:
1,登陆按钮触发弹出窗口的弹出,并且在显示弹出登陆窗口的时候 提供三个参数,
top:弹出窗口的位置 ,overlay:弹出窗口下面的遮罩层的透明度 closeButton:关闭弹出窗口的按钮。
(2)leanModal.js文件中的逻辑实现:
首先是提供默认值,默认top为 100,overlay为 0.5 closeButton为 null;
然后创建一个遮罩层div该div的id是lean_overlay将div添加到body标签下面。
3 使用jquery的extend函数来处理用户提供的参数
extend(defalut,options)
4 ,使用 this.each(function(){})函数,其中this表示当前通过选择器选中的jquery对象。在匿名函数内对对当前的dom对象this进行注册监听事件 ,
如下:
this.each(functon(){
//当前被遍历的dom对象
$(this).click(function((){
//当前被点击的dom对象
})
})
5,当某一个按钮被点击(,该按钮通过a标签实现该按钮的主要作用是弹出登陆弹窗)的时候,那我我们需要首先获取该按钮所关联的弹窗
var modaldialog_id=$(this).attr("href");
然后给遮罩层和之前传入的参数中的closeButton注册监听事件,该监听事件的主要作用就是关闭弹窗。
6 注册监听事件之后,需要设置遮罩层的属性,设置透明度为0和display属性为block。,然后使用动画fadeTo 设置透明度的变为最初提供的属性的overlay属性值。
以上两步是针对遮罩层 的设置。
7 获取 弹窗的高度和宽度 outerHeight和outerWIdth,该两个属性主要是用于设置弹窗居中显示
首先通过css函数设置 display为block,position为fixed 透明度为0,设置z-index属性为最大值,设置left为50%, 设置margin-left为上面获取到的outerWidth的宽度的一般的负数。
设置top为最初用户提供的属性的top属性值。
最后设置弹出窗口fadeTo 实现透明度的变化。
8 使用preventDefault组织事件。
6 关闭弹窗的实现:
设置弹出窗口的display属性为none,并且设置遮罩层 的opacity为0,使用fadeOut方法最终自动设置opacity为0,fadeOut(200)
注意几个问题:
问题一:
(1)$("#id").css({
"key":"value"
})
中的key和value需要使用双引号吗,如果value是数字那么也需要使用双引号吗,
$("#loginmodal").css({
"background":"red",
"height":"400px",
"opacity":”0.5“
})
$("#loginmodal").css({
background:"red",
height:"400px",
opacity:0.5
})
上面这两中写法都起到了作用。
本质上来讲css函数接收到的是一个字面量对象,所以我们传入的对象也是一个字面量对象。js要去创建字面量对象的时候对于key我们可以不需要使用双引号将key引号起来,而value可以是基本类型也可以是对象类型,所以在上面的例子中opacity对应的value设置为0.5会比较合适,而不是字符串0.5。
问题2 :
fadeTo方法在使用的时候是使用fadeTo(200,0.1),其中不需要指定opacity属性。
fadeTo方法可以把元素的不透明度以渐变方式调整到指定的值。这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。如果一个元素被调整到透明度为0,也就是变为不可见,但是元素的高度和宽度并不是为0。
给“内容” 添加fadeTo事件:
$("#panel h5.head").clcik(function(ev){
$(this).next("div.content").fadeTo(600,0.2);
})
问题3,在js代码中为了防止给同一个控件多次绑定click事件,所以在绑定click事件之前需要先使用off函数来解除控件上的click事件
$("modal").off("click").click(function(ev){})
问题4 对遮罩层的处理:
//注意这个地方需要在取消遮罩层的时候将遮罩层设置为display为none,否则遮罩层由于z-index比较大,将会遮挡住其他控件,
//使得其他控件无法响应点击事件。
$("#overlaydiv").css({ display: "none",});
//使得其他控件无法响应点击事件。
$("#overlaydiv").css({ display: "none",});
文件: