简单js 弹窗插件和基本调用方法

最新推荐文章于 2021-09-09 16:39:39 发布

转载最新推荐文章于 2021-09-09 16:39:39 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/markyun/blog/151627

文章标签：

#python #javascript #ViewUI

本文介绍了一个基于jQuery的自定义弹窗插件实现方法，包括如何设置弹窗的样式属性，如宽度、高度、背景颜色及透明度等，并演示了如何通过点击事件触发弹窗显示与隐藏。

2019独角兽企业重金招聘Python工程师标准>>>

// 弹窗插件基本调用方法
/*基于content可进行弹窗内容扩展
* $("input").AreaSelector({ content:"<a href='#'>1111</a>", isShade:false });
*/
(function($) {
$.fn.AreaSelector = function(optins) {
var defaults = {
width : "400",
height : "300",
bgcolor : "#ece9d8",
opacity : "0.75",
zIndex : 1000,
content : "",
isShade : true
};
var opts = $.extend(defaults, optins);
var bgdiv = $("<div></div>").css(
{ "position" : "absolute",
"top" : "0",
"background" : "red",
"filter" : "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)",
"opacity" : "0.6",
"width" : $(window).width(),
"height" : $(window).height(),
"z-index" : 999
});
var boxdiv = $("<div></div>")
.addClass("hide")
.css({ "position" : "absolute",
"align" : "center",
"background" : opts.bgcolor,
"filter" : "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)",
"opacity" : opts.opacity,
"width" : opts.width,
"height" : opts.height,
"z-index" : opts.zIndex,
"display" : "none"
});
boxdiv.append(opts.content);
// 初始化
var init = function(evt, opts) {
var offset = $(evt.target).offset();
boxdiv.css({
top : offset.top + 5 + $(evt.target).height() + "px",
left : offset.left
});
// boxdiv.toggle('slow');
boxdiv.toggle();
};
var hidDiv = function() {
// boxdiv.slideUp('slow');
boxdiv.hide(0);
};

var hidBgDiv = function() {
bgdiv.remove();
};
return this.each(function() {
var $this = $(this);
$this.after(boxdiv);
$this.click(function(evt) {
// 取消事件冒泡
evt.stopPropagation();
if (opts.isShade) {
$("body").append(bgdiv);
}
init(evt, opts);
});
$(document).click(function(event) {
hidDiv();
hidBgDiv();
});
boxdiv.click(function(evt) {
evt.stopPropagation();
});
});
};
})(jQuery);

转载于:https://my.oschina.net/markyun/blog/151627