【特效】弹窗效果,页面多个弹窗的实现

之前写过弹窗的调用,http://www.cnblogs.com/xiaoxianweb/p/5462608.html

但是其只适应于页面上只有一个弹窗的情景。

如果页面上有许多弹窗呢,而且弹出的弹窗里,又要弹出内容,要如何实现呢?

所以,把原来写的那个,优化了一下,让触发元素和弹出层,一一对应起来,点击,则弹出需要显示的内容。

话不多说,直接贴代码吧:

html:

<!–触发元素,class为js-dia-btn,不能更改,data-show为需要显示的层的id–>
<input type=”button” value=”点击弹出内容1″ class=”js-dia-btn” data-show=”con1″/>

<!–弹出层1,class为js-dia-con,不能更改,id为触发元素的data-show,一定对应起来,否则不显示–>
<div class=”js-dia-con con-1″ id=”con1″>
<p>内容1</p>
<div class=”close js-dia-close”>关闭</div>
<input type=”button” value=”点击弹出内容2″ class=”js-dia-btn” data-show=”con2″/>
</div>

<!–弹出层2–>
<div class=”js-dia-con con-2″ id=”con2″>
<p>内容2</p>
<div class=”close2 js-dia-close”>关闭</div>
</div>

<!–遮罩背景,class为js-dia-mask,不能更改–>
<div class=”js-dia-mask”></div>

css:

*弹窗定位和遮罩背景,必有的样式设置*/
.js-dia-con{display: none;position: fixed;left: 50%;top: 50%;z-index: 1001;}
.js-dia-mask{display: none;position: fixed;left: 0;top: 0;z-index: 1000;width: 100%;height: 100%;background: rgba(0,0,0,0.7);}

/*自定义弹窗样式*/
.con-1{width: 300px;height: 300px;background: #fff;}
.con-2{width: 200px;height: 200px;background: green;}

/*自定义关闭按钮样式*/
.close{width: 50px;height: 50px;background: aquamarine;position: absolute;right: -50px;top: -50px;}
.close2{width: 60px;height: 60px;background: blue;position: absolute;right: -70px;top: -70px;color: #fff;}

js:

$(function(){
//以下这三个元素,最好不要添加额外样式,只做为js获取元素用
var btn=$(“.js-dia-btn”);//触发弹窗的元素
var mask=$(“.js-dia-mask”);//遮罩背景
var close=$(“.js-dia-close”);//关闭按钮

btn.click(function(){
$(“.js-dia-con”).hide();//有弹窗嵌套的情况,所以先把所有弹窗隐藏
var name=$(this).attr(“data-show”);
var con=$(“#”+name);
var dia_w=con.width()/2;
var dia_h=con.height()/2;
con.css({“margin-left”:-dia_w,”margin-top”:-dia_h});
con.fadeIn();
mask.fadeIn();
});

mask.click(function(){
$(this).fadeOut();
$(“.js-dia-con”).fadeOut();
});

close.click(function(){
mask.fadeOut();
$(this).parents(“.js-dia-con”).fadeOut();
});

});

代码解析:

<input type=”button” value=”点击弹出内容1″ class=”js-dia-btn” data-show=”con1″/>

这个js-dia-btn,就是触发点击事件的元素,可以是任何标签,只要给他加个“js-dia-btn”这个class就好,而且啊,带js-开头的,最好不要再设置样式了,只作为jquery获取元素用,这样也在一定程度上实现了样式和形为的分离。然后,设置一个data-show属性,其值就是点击这个元素时,需要弹出的层的id。这里我用了id,因为id具有唯一性,这样就避免出现点击一个按钮,弹出一大堆层的bug。

<div class=”js-dia-con” id=”con1″>

<div class=”js-dia-close”>关闭</div>

</div>

这一段就是弹出层了,其js-dia-con也是必有的,id就是前面按钮的data-show,这两个地方的值一定要对起来,不然不会显示的哦。

js-dia-close,就是关闭按钮了,样式随便写。

总体来说,弹窗的样式,是可以自由发挥的,但是,弹层的定位,一定要写好,fixed定位,left:50%,top:50%。

<div class=”js-dia-mask”></div> 是遮罩大背景,一般是黑色半透明。

然后就是关键的js代码了,其实把他封装成一个插件也可以,像小巧的leanModal插件,原理可以说和我的一模一样,但是他对触发元素限制比较大,只能用a标签。

弹窗代码就这么几行,不封装也行了,只要把元素理顺,效果一样666。分别写了弹窗显示,和弹窗隐藏。为了效果更好,用了fadeIn()和fadeOut()替代show()和hide()。

还有要注意的就是,如果弹窗内容很多,高度超出窗口高度了,别忘定个height,然后给里面的内容加个overflow-y:auto,这样,用户体验更好。

朴素效果预览http://www.xiaoxianworld.com/mySample/dialog.html

(源码请右键,查看源代码,自行获取)

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注