弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!
1:遮罩层
要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask
代码如下:
.mask
{
position: fixed;
width: 100%;
height: 100%;
background-color: white;
overflow: scroll;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index: 20;
overflow: auto;
top: 0px;
right: 0px;
}
2:插件主要参数
tag:为什么需要tag?用tag可以指定需要弹出的隐藏元素,可以指定tag为选择器“#*”,这样可以弹出指定元素。这里我设置默认为this。
mainContent:这个参数是否需要?我觉得用处不大,我设置主要是为了对服务器控件,如果全部加在body,那就不能提交表单。但是submit点击后页面会刷新,弹出层消失,所以我觉得还是无用...
代码如下:
$.fn.xsPop = function (options) {
var defaults = {//默认值
title: "弹出窗口", //窗口标题
width: 500,
heigth: 400,
tag: this, //弹出需要加载的元素
close: "关闭",
mainContent: "body"//容器,为了可以提交表单,不过submit会刷新页面...
};
var options = $.extend(defaults, options); //以传参覆盖
this.each(function () {
xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //插件的主入口
});
};
3:利用xsMain函数添加元素,并绑定事件
这里有个处理,就是控制高度和宽度如果设置超过了屏幕高宽度,就会适应屏幕,这样防止弹出层过大不能操作。其他的就是普通的添加html,本人用的string相加
新闻热点
疑难解答
图片精选