suchen

Heim >Web-Frontend >js-Tutorial >jQuery realisiert das Floating-Layer-Plug-In, das durch Klicken auf button_jquery die schließbare Ebene öffnet

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

WBOY
WBOYOriginal
2016-05-16 15:38:351312Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS erkennt den Effekt des Schließens der Popup-Ebene und imitiert die Fähigkeiten von Weibo_javascriptNächster Artikel：JS erkennt den Effekt des Schließens der Popup-Ebene und imitiert die Fähigkeiten von Weibo_javascript

In Verbindung stehende Artikel

Mehr sehen