JQuery响应登陆注册弹出窗口遮罩层

需求：假设页面中存在多个按钮，每当点击这些按钮的时候就会弹出登陆的对话框。

比如说点击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",});

文件：