Jquery 팝 업 층 플러그 인 구현 코드

코드 직접 보기:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="jquery-1.3.2.js" type="text/javascript"></script> 
<script src="jquery.layer.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#button").click(function() { 
var layer = $('none').layer({ content: '      ，       none     ' }); 
layer.open(); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input id="button" type="button" value="    " /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<input type="button" onclick="$(this).layer({ content: $('#content') }).open();" value="    " /> 
<div id="content" style="display:none;"> 
  Dom       
<input id="aaa" type="text" value="    " /> 
</div> 
</form> 
</body> 
</html>


/* 
*   ：    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;}
*/ 
/// <reference path="jquery-1.3.2-vsdoc.js" /> 
(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("<link href=\"" + base.options.cssurl + "\" rel=\"stylesheet\" type=\"text/css\" />"); 
$.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 = $("<div style=\"display:none; z-index:" + $.layer.maskLayerIndex + "; filter: alpha(opacity:" + base.options.masklayer.alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height: " + $(document, base.options.target).height() + "px; background-color:" + base.options.masklayer.bgcolor + "\"></div>"); 
base.$masklayer.appendTo("body", base.options.target).animate({ 
opacity: 'toggle' 
}, 500); 
} 
}); 
} 

//     
base.moveStart = function(event) { 
base.moveing = true; 
base.bgColor = base.$layerBox.css("background-color"); 
base.$layerBox.css("background-color", "Transparent").children().hide(); 

base.posX = event.pageX - base.$layerBox.offset().left; 
base.posY = event.pageY - base.$layerBox.offset().top; ; 
$(document).mousemove(function(event) { 
base.moveOn(event); 
}).mouseup(function() { 
base.moveStop(); 
}); 
if ($.browser.msie) { 
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({ top: Math.max(event.pageY - base.posY, 0), left: Math.max(event.pageX - base.posX, 0) }); 
return false; 
} 
} 

//     
base.moveStop = function() { 
base.$layerBox.css("background-color", base.bgColor).children().show(); 
base.moveing = 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({ 
opacity: 'toggle' 
}, 500, function() { 
$(this).remove(); 
base.$layerBox.animate({ 
left: base.$el.offset().left, 
top: base.$el.offset().top, 
width: 0, 
height: 0, 
opacity: "hide" 
}, "hide", function() { 
$(this).remove(); 
}); 
}); 
} 
else { 
base.$layerBox.animate({ 
left: base.$el.offset().left, 
top: base.$el.offset().top, 
width: 0, 
height: 0, 
opacity: "hide" 
}, "hide", 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, 
template: "<div class=\"layer-box\"><div class=\"layer-bar\"><div class=\"layer-title\"></div><span class=\"layer-close\">×</span></div><div class=\"layer-content\"></div></div>" 
} 

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

플러그 인 다운로드 주소:jquery.layer.js

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Jquery에서 동일한 NAME 또는 id 행 삭제 작업 가져오기

//Jquery 같은 수를 가져오고 줄 수와 인자를 삭제합니다. //ID'''또는this를 통해 본 줄의 두 번째 tdeq를 획득(1) 0부터 $("#"+id+"").parents("tr").find("td:eq(1...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Jquery 팝 업 층 플러그 인 구현 코드

좋은 웹페이지 즐겨찾기