JQ-wap-overlay

终于自己写了第一个插件了,晚上要喝一瓶饮料庆祝一下~

;(function($){
$.fn.extend({
“overlay_show”: function(){
var $_html = $.trim(this.html());
var $overlay = $(“<div class=’overlay’ style=’display: table;’></div>”);
var $overlay_bg = $(“<div class=’overlay-bg’></div>”);
$($_html).clone().appendTo($overlay_bg).css({“display”:”block”});
$overlay_bg.appendTo($overlay);
$overlay.appendTo($(“body”));
if($(“.overlay”).length>1){
return;
}
var $body_scroll_top = $(“body”)[0].scrollTop;
$(“body div:first”).css({
“position”:”fixed”,
“top”:-$body_scroll_top+”px”
});
},
“overlay_close”:function(){
this.closest(“.overlay-wrap-bg”).remove();
this.closest(“.overlay”).remove();
if($(“.overlay”).length>0){
return;
}
var $body_scroll_top = -parseInt($(“body div:first”).css(“top”));
$(“body div:first”).removeAttr(“style”);
$(window).scrollTop($body_scroll_top);
}
})
})(jQuery);

$(“body”).delegate(“[data-toggle=’overlay.show’]”, “click”,function(){
var $target = $($(this).attr(“data-target”));
$target.overlay_show();
return false;
});

$(“body”).delegate(“[data-toggle=’overlay.close’]”, “click”, function() {
var $btn = $(this);
$btn.overlay_close();
return false;
});

$(“body”).delegate(“.overlay-bg div”, “click”, function(e) {
e.stopPropagation();
});

$(“body”).delegate(“.overlay-bg”, “click”, function() {
var $div = $(this);
$div.overlay_close();
return false;
});

这个方法写出来已经很久了,但是一直不会写成插件,使用期间也是一直完善,智能教了让背景固定的方法,超赞。

这个方法在以后使用中肯定也会一直完善,没有完美的方法,只有最合适的方式。

demo

发表评论

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