数码资讯
jQuery实现的弹出式插件
弹出图层的应用相当多。登陆，在同一页上的一些操作，别人永远是别人，自己是自己的，所以我一直想写一个弹出层plug-in.no废话，往前走！ 1：覆盖层 要弹出图层，首先使用一个遮罩层来阻挡下面的页面。掩码层是全屏的，页面滚动也需要设置。因此，设置位置：固定和透明的效果。接下来是我定义的掩码层CSS，
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
弹出图层的应用相当多。登陆，在同一页上的一些操作，别人永远是别人，自己是自己的，所以我一直想写一个弹出层plug-in.no废话，往前走！
1：覆盖层
要弹出图层，首先使用一个遮罩层来阻挡下面的页面。掩码层是全屏的，页面滚动也需要设置。因此，设置位置：固定和透明的效果。接下来是我定义的掩码层CSS，名为掩码。
复制代码代码如下所示：
。面膜
{
位置：固定；
宽度：100%；
身高：100%；
背景颜色：白色；
溢出：滚动；
滤镜：alpha（不透明度= 50）；
-个不透明度：0.5；
不透明性：0.5；
Z指数：20；
溢出：自动；
上图：0px；
右：0px；
}
2：插件的主要参数
你为什么需要标签标签可以指定需要弹出一个隐藏的元素，您可以指定# *标签选择器，你可以指定流行元素。在这里我设置默认这。
这个参数要求主要内容：我认为它不是很有用。我主要是为服务器控件设置的，如果它们都添加到了正文中，就不能提交表单。但是当提交命中页面时，页面会刷新，弹出层消失，所以我认为它仍然无用。
复制代码代码如下所示：
美元。fn.xspop =功能（选项）{
var默认值=默认值
标题：弹出窗口标题
宽度：500，
身高：400，
标记：这个加载项的弹出窗口
关闭：关闭
主要内容：身体 / /容器，以提交表单提交，但将刷新页面…
}；
var选项=扩展（默认值，选项）；
this.each（函数（）{（）
XsMain（options.title，options.width，options.heigth，options.tag，options.close，选项内容）； / /插件的主要入口
}）；
}；
3：加用xsmain功能元素绑定事件
这里有一种控制高度和宽度的方法。如果设置超过屏幕的高度，它将适应屏幕，使弹出层太大而无法操作。另一个是普通的HTML添加，以及我使用的字符串的添加。
复制代码代码如下所示：
根据输入的数据，添加一个图层蒙版、弹出框
功能xsmain（标题、宽度、高度、标签、关闭、主要内容）{
无功divmask = ；
$（内容）。追加（divmask）；
无功xspop1 = ；
无功xspop2 = +标题+++关闭；
无功xspop3 = ；
无功xspop5 = ；
无功allhtml = xspop1 + xspop2 + xspop3 + xspop5；
$（内容）。追加（allhtml）；
美元（标签）；
$（标签），AppendTo（# xspopmain ）；
一个浏览器的高度和宽度的背面判断（高度超过，拖动边界限制）
window.screen.height自己=；
clientwidth =屏幕分辨率的宽；
如果（高度＞自己）{
自己的高度= 100；
}
如果（宽度＞clientwidth）{
clientwidth宽度= 100；
}
$（# xspop）。Css（{
高：高度+PX
宽度：宽度+
边距顶部：+（高度 2）+
边缘左：+（宽度 2）+
}）；
$（# xspopmain）。Css（高
Xsdrag（# xspophead
$（# xscolse）。Bind（点击），功能（{ closepop（标签、内容）；}）； / /绑定了行动
}
4：闭幕行动
这里是先把标签给容器，否则后面的删除将一起删除，第二个弹出的标签找不到。
复制代码代码如下所示：
关闭弹出图层
功能closepop（标签内容）{
$（内容）。追加（标签）； / /保存，或第四美元（# xspop ），删除（标签）将空
美元（标签）；
$（掩码）；
$（# xspop ）删除（）；
}
5：拖放效果
方法1：第一次发现使用元素的事件，但很容易出现元素丢失的问题，效果不理想。
复制代码代码如下所示：
弹出拖动（失败的方法，对象会出现丢失）
控件是一个拖放元素，标记是动作元素，一般控件位于标记内。
函数拖动（控制，标记）{
ismove =假 /无功；
无功/ abs_x = 0，abs_y = 0；
（控制）。Mousedown（$ /
函数（事件）{
偏移量；
左（=）；
/ / abs_x = event.pagex左；
/ / abs_y = event.pagey顶；
/ / ismove =真；
/ / Mouseleave（功能）（{ }）
/ / ismove = false；
}；
/ / $（控制）。Mouseup（function（）{
/ / ismove = false；
}；
/ / $（document）。Mousemove（函数（事件）{
如果（ismove）{ / /
Css（{）
/ /右：event.pagex - abs_x + $（标签）。Width（2-1） /，
/ /顶：event.pagey - abs_y + $（标签）。Height（- 1）/ 2
}；
}
返回/ false；
}；
}
第二种方法，我目前使用的方法是使用文档的下降和上升，但仍然存在一些问题。移动太快的问题是一个小的跳动现象。
我也发现了一个问题。如果我把弹出层直接在屏幕的上部，那么你永远不能把它背或关闭它。我去百度主页上看到弹出层，和他们有同样的现象，但窗口点扩大，弹出层回到中心，我也试图这样做，但当我把onresize，我不能移动的底部。他们使用的事件是绝对不onresize。，所以我直接判断鼠标的位置不能低于0。
复制代码代码如下所示：
拖动/弹出
控件是一个拖放元素，标记是动作元素，一般控件位于标记内。
功能xsdrag（控制、标签）{
$（控制）。Mousedown（功能（E） / / E鼠标事件
{
var偏移量=（$）。
var x = e.pagex - offset.left； / /获取鼠标指针从DIV元素的左边框的距离
var y = e.pagey - offset.top； / / DIV元素边界距离获取鼠标指针
$（document）。Bind（MouseMove
{
如果（ev.pagey <= 0）{ return；} / /无法关闭边境，防止在屏幕上拖动
$（标签）Css（{
左：ev.pagex X + $（标签），Width（2） / / /，我需要添加此布局
顶：ev.pagey Y + $（标签）。Height（） / 2
}）；
}）；
}）；
$（document）。Mouseup（function（）{）
$（这）。Unbind（鼠标移动）；
}）；
}
6：样式表
弹出层的布局使用顶部和左边+边距顶部的负值，所以我的JS有一半以上的高度和宽度。
复制代码代码如下所示：
。面膜
{
位置：固定；
宽度：100%；
身高：100%；
背景颜色：白色；
溢出：滚动；
滤镜：alpha（不透明度= 50）；
-个不透明度：0.5；
不透明性：0.5；
Z指数：20；
溢出：自动；
上图：0px；
右：0px；
}
弹出。
{
填料：0px；
位置：绝对；
Z指数：21！重要；
背景颜色：白色；
边框风格：固-固-固；
边框宽度：1px；
边框颜色：# c0c0c0；
左：50%；
顶部：50%；
}
pophead。
{
背景颜色：# f0f0f0；
边框底部样式：实心；
底部边框宽度：1px；
底部边框颜色：# c0c0c0；
身高：30px；
光标移动；
剪辑：矩形（0px，汽车，汽车，0px）；
}
PopHead B。
{
浮点数：左；
显示块；
颜色：# c0c0c0；
字体族：系统；
字体大小：中等；
行高：30px；
文本缩进：2em；
}
PopHead的跨度。
{
浮子：右边；
显示块；
文本对齐：正确；
行高：30px；
光标：指针；
文本缩进：5px；
颜色：# FF0000；
字体大小：12pt；
}
popmain。
{
填料：10px；
溢出：自动；
}
7：页面的使用
测试服务器控件可以提交表单
复制代码代码如下所示：
$（文档）Ready（函数（）{）
$（# btnpop）。Click（function（）{）
var选项{ {
标题：我的流行音乐
宽度：500，
身高：400，
关闭：关闭
主要内容：形式
}
$（# POP1）。XsPop（选项）；
}）；
}）；
这几乎是对的。我也想做一个边界拖动改变大小的大小变化，发现它需要一点时间，先不要做。事实上，我认为拖放不是很重要，而且边界控制大小不显著，因为我设置了溢出和滚动条。
1：覆盖层
要弹出图层，首先使用一个遮罩层来阻挡下面的页面。掩码层是全屏的，页面滚动也需要设置。因此，设置位置：固定和透明的效果。接下来是我定义的掩码层CSS，名为掩码。
复制代码代码如下所示：
。面膜
{
位置：固定；
宽度：100%；
身高：100%；
背景颜色：白色；
溢出：滚动；
滤镜：alpha（不透明度= 50）；
-个不透明度：0.5；
不透明性：0.5；
Z指数：20；
溢出：自动；
上图：0px；
右：0px；
}
2：插件的主要参数
你为什么需要标签标签可以指定需要弹出一个隐藏的元素，您可以指定# *标签选择器，你可以指定流行元素。在这里我设置默认这。
这个参数要求主要内容：我认为它不是很有用。我主要是为服务器控件设置的，如果它们都添加到了正文中，就不能提交表单。但是当提交命中页面时，页面会刷新，弹出层消失，所以我认为它仍然无用。
复制代码代码如下所示：
美元。fn.xspop =功能（选项）{
var默认值=默认值
标题：弹出窗口标题
宽度：500，
身高：400，
标记：这个加载项的弹出窗口
关闭：关闭
主要内容：身体 / /容器，以提交表单提交，但将刷新页面…
}；
var选项=扩展（默认值，选项）；
this.each（函数（）{（）
XsMain（options.title，options.width，options.heigth，options.tag，options.close，选项内容）； / /插件的主要入口
}）；
}；
3：加用xsmain功能元素绑定事件
这里有一种控制高度和宽度的方法。如果设置超过屏幕的高度，它将适应屏幕，使弹出层太大而无法操作。另一个是普通的HTML添加，以及我使用的字符串的添加。
复制代码代码如下所示：
根据输入的数据，添加一个图层蒙版、弹出框
功能xsmain（标题、宽度、高度、标签、关闭、主要内容）{
无功divmask = ；
$（内容）。追加（divmask）；
无功xspop1 = ；
无功xspop2 = +标题+++关闭；
无功xspop3 = ；
无功xspop5 = ；
无功allhtml = xspop1 + xspop2 + xspop3 + xspop5；
$（内容）。追加（allhtml）；
美元（标签）；
$（标签），AppendTo（# xspopmain ）；
一个浏览器的高度和宽度的背面判断（高度超过，拖动边界限制）
window.screen.height自己=；
clientwidth =屏幕分辨率的宽；
如果（高度＞自己）{
自己的高度= 100；
}
如果（宽度＞clientwidth）{
clientwidth宽度= 100；
}
$（# xspop）。Css（{
高：高度+PX
宽度：宽度+
边距顶部：+（高度 2）+
边缘左：+（宽度 2）+
}）；
$（# xspopmain）。Css（高
Xsdrag（# xspophead
$（# xscolse）。Bind（点击），功能（{ closepop（标签、内容）；}）； / /绑定了行动
}
4：闭幕行动
这里是先把标签给容器，否则后面的删除将一起删除，第二个弹出的标签找不到。
复制代码代码如下所示：
关闭弹出图层
功能closepop（标签内容）{
$（内容）。追加（标签）； / /保存，或第四美元（# xspop ），删除（标签）将空
美元（标签）；
$（掩码）；
$（# xspop ）删除（）；
}
5：拖放效果
方法1：第一次发现使用元素的事件，但很容易出现元素丢失的问题，效果不理想。
复制代码代码如下所示：
弹出拖动（失败的方法，对象会出现丢失）
控件是一个拖放元素，标记是动作元素，一般控件位于标记内。
函数拖动（控制，标记）{
ismove =假 /无功；
无功/ abs_x = 0，abs_y = 0；
（控制）。Mousedown（$ /
函数（事件）{
偏移量；
左（=）；
/ / abs_x = event.pagex左；
/ / abs_y = event.pagey顶；
/ / ismove =真；
/ / Mouseleave（功能）（{ }）
/ / ismove = false；
}；
/ / $（控制）。Mouseup（function（）{
/ / ismove = false；
}；
/ / $（document）。Mousemove（函数（事件）{
如果（ismove）{ / /
Css（{）
/ /右：event.pagex - abs_x + $（标签）。Width（2-1） /，
/ /顶：event.pagey - abs_y + $（标签）。Height（- 1）/ 2
}；
}
返回/ false；
}；
}
第二种方法，我目前使用的方法是使用文档的下降和上升，但仍然存在一些问题。移动太快的问题是一个小的跳动现象。
我也发现了一个问题。如果我把弹出层直接在屏幕的上部，那么你永远不能把它背或关闭它。我去百度主页上看到弹出层，和他们有同样的现象，但窗口点扩大，弹出层回到中心，我也试图这样做，但当我把onresize，我不能移动的底部。他们使用的事件是绝对不onresize。，所以我直接判断鼠标的位置不能低于0。
复制代码代码如下所示：
拖动/弹出
控件是一个拖放元素，标记是动作元素，一般控件位于标记内。
功能xsdrag（控制、标签）{
$（控制）。Mousedown（功能（E） / / E鼠标事件
{
var偏移量=（$）。
var x = e.pagex - offset.left； / /获取鼠标指针从DIV元素的左边框的距离
var y = e.pagey - offset.top； / / DIV元素边界距离获取鼠标指针
$（document）。Bind（MouseMove
{
如果（ev.pagey <= 0）{ return；} / /无法关闭边境，防止在屏幕上拖动
$（标签）Css（{
左：ev.pagex X + $（标签），Width（2） / / /，我需要添加此布局
顶：ev.pagey Y + $（标签）。Height（） / 2
}）；
}）；
}）；
$（document）。Mouseup（function（）{）
$（这）。Unbind（鼠标移动）；
}）；
}
6：样式表
弹出层的布局使用顶部和左边+边距顶部的负值，所以我的JS有一半以上的高度和宽度。
复制代码代码如下所示：
。面膜
{
位置：固定；
宽度：100%；
身高：100%；
背景颜色：白色；
溢出：滚动；
滤镜：alpha（不透明度= 50）；
-个不透明度：0.5；
不透明性：0.5；
Z指数：20；
溢出：自动；
上图：0px；
右：0px；
}
弹出。
{
填料：0px；
位置：绝对；
Z指数：21！重要；
背景颜色：白色；
边框风格：固-固-固；
边框宽度：1px；
边框颜色：# c0c0c0；
左：50%；
顶部：50%；
}
pophead。
{
背景颜色：# f0f0f0；
边框底部样式：实心；
底部边框宽度：1px；
底部边框颜色：# c0c0c0；
身高：30px；
光标移动；
剪辑：矩形（0px，汽车，汽车，0px）；
}
PopHead B。
{
浮点数：左；
显示块；
颜色：# c0c0c0；
字体族：系统；
字体大小：中等；
行高：30px；
文本缩进：2em；
}
PopHead的跨度。
{
浮子：右边；
显示块；
文本对齐：正确；
行高：30px；
光标：指针；
文本缩进：5px；
颜色：# FF0000；
字体大小：12pt；
}
popmain。
{
填料：10px；
溢出：自动；
}
7：页面的使用
测试服务器控件可以提交表单
复制代码代码如下所示：
$（文档）Ready（函数（）{）
$（# btnpop）。Click（function（）{）
var选项{ {
标题：我的流行音乐
宽度：500，
身高：400，
关闭：关闭
主要内容：形式
}
$（# POP1）。XsPop（选项）；
}）；
}）；
这几乎是对的。我也想做一个边界拖动改变大小的大小变化，发现它需要一点时间，先不要做。事实上，我认为拖放不是很重要，而且边界控制大小不显著，因为我设置了溢出和滚动条。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。