jQuery realisiert das Floating-Layer-Plug-In, das durch Klicken auf button_jquery die schließbare Ebene öffnet-js-Tutorial-php.cn

jQuery realisiert das Floating-Layer-Plug-In, das durch Klicken auf button_jquery die schließbare Ebene öffnet

WBOY

Freigeben： 2016-05-16 15:38:35

Original

1324 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung eines Floating-Layer-Plug-Ins, das durch Klicken auf eine Schaltfläche eine schließbare Ebene öffnet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein komisches Jquery-Popup-Layer-Plugin, das vom Bird Js-Popup-Plugin übernommen wurde. Drücken Sie ESC, um das Fenster zu schließen. Es gibt standardmäßig keinen Stil. Sie können Stile entsprechend Ihren eigenen Projekten schreiben. Der Popup-Layer-Code ist sehr klein, die Mindestversion beträgt nur 1,15 KB und es lohnt sich, ihn zu verwenden, da er klein ist. Ich hoffe, dass einige Internetnutzer es verbessern und kleiner machen können.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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实现可拖动弹出层特效</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&#63;k:document.body,b=a.scrollHeight>a.clientHeight&#63;a.scrollHeight:a.clientHeight,c=a.scrollWidth>a.clientWidth&#63;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">点我弹一个</button></dt>
 <dt><button id="t2">点我再弹一个</button></dt>
</dl>
</center>
<div id="detail">
<div class="tit"><i class="close">关闭</i></div>
</div>
<div id="detail2">
<div class="tit"><i class="close">关闭</i></div>
再弹出一个窗
</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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.