jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件

更新時(shí)間：2015年09月19日 10:18:20 作者：企鵝

這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件,具有點(diǎn)擊彈出帶有遮罩層的浮動(dòng)層效果,且浮動(dòng)層可拖動(dòng)、可關(guān)閉,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件。分享給大家供大家參考。具體如下：

這是一款由漫畫Jquery彈出層插件改編而來(lái)，小鳥(niǎo)Js彈窗插件，按ESC可以關(guān)閉窗口。默認(rèn)不帶樣式，大家可以根據(jù)自己的項(xiàng)目寫樣式。彈出層代碼很小，min版的只1.15k，因?yàn)樾∷灾档脩?yīng)用。希望有網(wǎng)友可以再改進(jìn)，希望她變得更小。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/

具體代碼如下：

<!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>
<title>jquery實(shí)現(xiàn)可拖動(dòng)彈出層特效</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function popWin(a){function n(){var a=k?k:document.body,b=a.scrollHeight>a.clientHeight?a.scrollHeight:a.clientHeight,c=a.scrollWidth>a.clientWidth?a.scrollWidth:a.clientWidth;$("#maskLayer").css({height:b,width:c})}var d,e,b=9e3,c=!1,f=$("#"+a),g=f.width(),h=f.height(),i=f.find(".tit"),j=f.find(".close"),k=document.documentElement,l=($(document).width()-f.width())/2,m=(k.clientHeight-f.height())/2;f.css({left:l,top:m,display:"block","z-index":b- -1}),i.mousedown(function(a){c=!0,d=a.pageX-parseInt(f.css("left")),e=a.pageY-parseInt(f.css("top")),f.css({"z-index":b- -1}).fadeTo(50,.5)}),i.mouseup(function(){c=!1,f.fadeTo("fast",1)}),$(document).mousemove(function(a){if(c){var b=a.pageX-d;0>=b&&(b=0),b=Math.min(k.clientWidth-g,b)-5;var i=a.pageY-e;0>=i&&(i=0),i=Math.min(k.clientHeight-h,i)-5,f.css({top:i,left:b})}}),j.live("click",function(){$(this).parent().parent().hide().siblings("#maskLayer").remove()}),$('<div id="maskLayer"></div>').appendTo("body").css({background:"#000",opacity:".4",top:0,left:0,position:"absolute",zIndex:"8000"}),n(),$(window).bind("resize",function(){n()}),$(document).keydown(function(a){27==a.keyCode&&($("#maskLayer").remove(),f.hide())})}
</script>
<style type="text/css">
body{margin:0; padding:0;font-size:12px;}
dt{padding:10px;}
p{ height:100px; line-height:100px; border:1px solid #eee; margin:10px; }
i{ font-style:normal;}
#detail{ position:absolute;width:400px;height:200px;border:1px solid #ccc;background:#efefef; display:none;}
#detail .tit{ background:#ddd; display:block; height:33px; cursor:move;}
#detail .tit i{ float:right; line-height:33px; padding:0 8px;cursor:default;}
#detail2{position:absolute;width:300px;height:100px;border:1px solid #555;background:#555;display:none;}
#detail2 .tit{ background:#333; display:block; height:33px;cursor:move;}
#detail2 .tit i{ float:right; line-height:33px; padding:0 8px; color:#777; cursor:default;}
</style>
</head>
<body>
<br /><br />
<center>
<dl>
<dt><button id="t1">點(diǎn)我彈一個(gè)</button></dt>
 <dt><button id="t2">點(diǎn)我再?gòu)椧粋€(gè)</button></dt>
</dl>
</center>
<div id="detail">
<div class="tit"><i class="close">關(guān)閉</i></div>
</div>
<div id="detail2">
<div class="tit"><i class="close">關(guān)閉</i></div>
再?gòu)棾鲆粋€(gè)窗
</div>
<script type="text/javascript">
 $("#t1").click(function(){
   popWin("detail");
 });
 $("#t2").click(function(){
   popWin("detail2");
 });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: