- // 弹窗插件 基本调用方法
- /*基于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);
- //该片段来自于http://www.codesnippet.cn/detail/181220138107.html
来源: http://www.codesnippet.cn/detail/181220138107.html