Jquery ポップアップ レイヤー プラグインの実装 code_jquery

コードを直接確認します。

コードをコピーします コードは次のとおりです。

< %@ ページ言語=" C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %>








< script type="text/ javascript">
$(document).ready(function() {
$("#button").click(function() {
var レイヤー = $(' none').layer( { content: 'これはレイヤーのコンテンツです。デフォルトのフォーカスは none オブジェクトに置き換えることができます' });
layer.open()
}); ;

gt;
gt;
gt;
gt;
gt;

gt;

br />

私は Dom オブジェクト内のコンテンツです

コードをコピーします🎜>

コードは次のとおりです:

/*
* 作者：彭白洋 2009.10.24
* 功能：可弹出自定义字符串、Dom对象，根据事件焦点弹出、关闭动画
* 调用方法：
* 1、初始化直接打开：$("#buttonID").layer().open()；
* 2、初始化：var layer=$("#buttonID").layer()；打开：layer.open()；关闭：layer.close()；
* 3、初始化：var layer=$("#buttonID").layer({自定义配置})；打开：layer.open()；关闭：layer.close()；
*样式：
* .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;}
* .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;}
* .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;}
* .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/
///
(function($) {
$.layer = function(element, options) {
var base = this;
base.$el = $(element);
base.tagHide = true;
//初始化层
base.init = function() {

base.options = $.extend({}, $.layer.defaults, options);
base.$layerBox = $(base.options.template);
base.posX = base.posY = 0;
base.moveing = false;

//加载样式
if (!$.layer.hasCss && base.options.cssurl != "") {
$("head", base.options.target).append("");
$.layer.hasCss = true;
}

//加载层对象
$.layer.maskLayerIndex += 20; //调高层位置
base.$layerBox.appendTo("body", base.options.target).css({ "z-index": $.layer.maskLayerIndex }).hide();
base.$layerBox.find("div[class='layer-title']").append(base.options.title);
//判断内容是字符串还是Jquery对象
if (typeof (base.options.content) == "object") {
base.$tempContentParent = base.options.content.parent();
base.tagHide = base.options.content.is(":hidden");
base.$tempContent = base.options.content.clone();
base.options.content.appendTo(base.$layerBox.find("div[class='layer-content']")).show();
}
else {
base.$layerBox.find("div[class='layer-content']").append(base.options.content);
}
//绑定关闭按钮事件
base.$layerBox.find("span[class='layer-close']").mousedown(function(event) {
//阻止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
base.close();
return false;
});
base.$layerBox.find("div[class='layer-bar']").mousedown(function(event) {
base.moveStart(event);
});
//base.$layerBox.show();


}

//打开层
base.open = function() {
//层显示动画
//alert($("html", base.options.target).height());
var mtop = ($("html", base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrollTop(); //
var mleft = $("html", base.options.target).width() / 2 - base.options.width / 2; //
base.$layerBox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({
left: mleft,
top: mtop,
width: base.options.width,
height: base.options.height,
opacity: "show"
}, "slow", function() {
//加载遮罩层
if (base.options.masklayer.show) {
$.layer.maskLayerIndex -= 10; //降低层位置
base.$masklayer = $("

");
base.$masklayer.appendTo("body", Base.options.target).animate({
opacity: 'toggle'
}, 500);
}
});
}

//移動開始
base.moveStart = function(event) {
base.moveing = true; .css("背景色");
base.$layerBox.css("背景色", "透明").children().hide();

base.posX = イベント.pageX - ベース.$layerBox.offset().left;
base.posY = イベント.pageY - ベース.$layerBox.offset().top ; ) {
base.moveOn(event);
}).mouseup(function() {
base.moveStop();
}); {
base.$layerBox.get(0).setCapture();
} else {
document.addEventListener("mousemove", Base.moveOn, true);

//移動中
base.moveOn = function(event) {
if (base.moveing) {
window.getSelection && window.getSelection().removeAllRanges();
base.$layerBox.css({ 上: Math.max(event.pageY - Base.posY, 0), 左: Math.max(event.pageX - Base.posX, 0) }); false;
}
}

//移動停止
base.moveStop = function() {
base.$layerBox.css("background-color", Base.bgColor ).children().show();
base.movi​​ng = false;
$(document,base.options.target).unbind("mousemove");
if ($.browser.msie) {
base.$layerBox.get(0).releaseCapture();
} else {
document.removeEventListener("mousemove",base.moveOn, true);
}
}

//关闭层
base.close = function() {
if (base.$tempContent) {
base.$tempContent.appendTo( Base.$tempContentParent);
if(base.tagHide){
base.$tempContent.hide();
}
}
if (base.options.masklayer.show) {
base.$masklayer.animate({
不透明度: 'toggle'
}, 500, function( ) {
$(this).remove();
base.$layerBox.animate({
left:base.$el.offset().left,
top:base.$el .offset().top,
幅: 0,
高さ: 0,
不透明度: "非表示"
}, "非表示", function() {
$(this).削除();
});
}
else {
base.$layerBox.animate({
左:base.$el.offset().left,
上:base.$el.offset(). top,
幅: 0,
高さ: 0,
不透明度: "非表示"
}, "非表示", function() {
$(this).remove()
});
}
}

base.init();
}

$.layer.hasCss = false;
$.layer.maskLayerIndex = 1000;
//默认構成
$.layer.defaults = {
masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, // 否か显示覆盖层
target: window.self.document、
cssurl: "layer.css"、
title: "层标题"、
content: "层内容"、
width: 500、
height: 300 、
テンプレート: "

< span class="layer-close">×

"
}

$.fn.layer = function(options) {
return new $.layer(this, options);
}
})(jQuery);


插件下載地址：
jquery.layer.js