cari
Rumahhujung hadapan webtutorial js一个jquery的弹出层的插件_jquery

弹出层插件

String.prototype.replaceAll = function(s1,s2){ 
return this.replace(new RegExp(s1,"gm"),s2); 
}; 
(function($){ 
/* 
* $-layer 0.1 - jquery pulg-in 
* 
* Copyright (c) 2008 King Wong 

* $Date: 2008-09-28 $ 
*/ 
var ___win___ = window.self; 
var ___self___ = window.self; 
var ___id___ = ""; 
var ___settings___ = {}; 
var isMouseDown = false; 

var currentElement = null; 

var dropCallbacks = {}; 
var dragCallbacks = {}; 

var bubblings = {}; 

var lastMouseX; 
var lastMouseY; 
var lastElemTop; 
var lastElemLeft; 

var dragStatus = {}; 

var holdingHandler = false; 

$.getMousePosition = function(e){ 
var posx = 0; 
var posy = 0; 

if (!e) var e = window.event; 

if (e.pageX || e.pageY) { 
posx = e.pageX; 
posy = e.pageY; 
} 
else if (e.clientX || e.clientY) { 
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
return { 'x': posx, 'y': posy }; 
}; 
$.updatePosition = function(e) { 
var pos = $.getMousePosition(e); 

var spanX = (pos.x - lastMouseX); 
var spanY = (pos.y - lastMouseY); 
var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0; 
var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0; 
$("#"+___id___,___win___.document).css("top", _top); 
$("#"+___id___,___win___.document).css("left", _left); 
}; 

$.fn.ondrag = function(callback){ 
return this.each(function(){ 
dragCallbacks[this.id] = callback; 
}); 
}; 
$.fn.ondrop = function(callback){ 
return this.each(function(){ 
dropCallbacks[this.id] = callback; 
}); 
}; 

$.fn.dragOff = function(){ 
return this.each(function(){ 
dragStatus[this.id] = 'off'; 
}); 
}; 

$.fn.dragOn = function(){ 
return this.each(function(){ 
dragStatus[this.id] = 'on'; 
}); 
}; 
$.extend({ 
layerSettings:{ 
id:"layerdiv", 
target:window.self, 
width:220, 
height:220, 
templete:&#39;<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@"></div></div>&#39;, 
cssurl:&#39;&#39;, 
content:&#39;&#39;, 
title:&#39;&#39;, 
isbg:true, 
opacity:0.3 
}, 
layerSetup: function( settings ) { 
$.extend( $.layerSettings, settings ); 
___settings___[settings.id] = settings; 
___id___ = settings.id; 
}, 
layershow:function(){ 
___win___ = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; 

var win = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; 
var __bw = $("body",win.document).width(); 
var __bh = $("body",win.document).height() > $(window).height() ? $("body",win.document).height() : $(window).height(); 
var _width = $.layerSettings.width; 
var _height = $.layerSettings.height; 

if(___win___.document.getElementById(___id___)) return; 
var _moveid = ___id___ + "_move"; 
var _titleid = ___id___ + "_title"; 
var _contentid = ___id___ + "_content"; 
var _cssurl = $.layerSettings.cssurl; 
var opacity = $.layerSettings.opacity; 
(function(){ 
$("head",win.document).append(&#39;<link type="text/css" href="&#39;+_cssurl+&#39;" rel="stylesheet" />&#39;); 
})(); 
__index = $.layermaxindex(); 
var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0; 
var __top = 100; 
var __bgDiv = &#39;<div id="&#39;+___id___+&#39;_background" style="background:#000000; filter:alpha(opacity=&#39;+(opacity*100)+&#39;); opacity: &#39;+opacity+&#39;; width:&#39;+__bw+&#39;px; height:&#39;+__bh+&#39;px; z-index:&#39;+(__index++)+&#39;; position:absolute; left:0px; top:0px;"></div>&#39;; 
if($.layerSettings.isbg) 
{ 
$("body",win.document).append(__bgDiv); 
} 
$("body",win.document).append(&#39;<div id="&#39;+___id___+&#39;" style="z-index:&#39;+__index+&#39;;position:absolute; left:&#39;+__left+&#39;px; top:&#39;+__top+&#39;px;"></div>&#39;); 
var _templete = $.layerSettings.templete; 
var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid); 
$("#"+___id___,win.document).append(__templete); 
$("#"+_contentid,win.document).append($.layerSettings.content); 
var self = window.self; 
var ___win = $.layerSettings.target.document; 
var idd = ___id___; 
$(".layerclose",win.document).bind("click",function() 
{ 
self.$.layerclose(idd,___win); 
}); 
$("#"+___id___,win.document).bind("click",function() 
{ 
var id = this.id; 
self.$.layerSetup(___settings___[id]); 
self.$(this).css("z-index",$.layermaxindex()); 
}); 
$(win.document,win).bind("click",function(e) 
{ 
var pos = self.$.getMousePosition(e); 

}); 
$(win.document,win).mousemove(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){ 
self.$.updatePosition(e); 
if(dragCallbacks[currentElement.id] != undefined){ 
dragCallbacks[currentElement.id](e, currentElement); 
} 
return false; 
} 
}); 
$(win.document,win).mouseup(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){ 
isMouseDown = false; 
if(dropCallbacks[currentElement.id] != undefined){ 
dropCallbacks[currentElement.id](e, currentElement); 
} 
return false; 
} 
}); 
(function(){ 
bubblings[___id___] = true; 

dragStatus[___id___] = "on"; 

//setHandler 
bubblings[this.id] = true; 

dragStatus[_moveid] = "handler"; 

$("#"+_moveid,win.document).css("cursor", "move"); 

$("#"+_moveid,win.document).mousedown(function(e){ 
var id = this.id.replace("_move",""); 
___id___ = id; 
self.$("#"+id,win.document).css("z-index",$.layermaxindex()); 
self.$.layerSetup(___settings___[id]); 
if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler)) 
return bubblings["#"+___id___]; 

isMouseDown = true; 
currentElement = self.$("#"+___id___); 

var pos = self.$.getMousePosition(e); 
lastMouseX = pos.x; 
lastMouseY = pos.y; 

lastElemTop = win.document.getElementById(___id___).offsetTop; 
lastElemLeft = win.document.getElementById(___id___).offsetLeft; 

self.$.updatePosition(e); 
holdingHandler = true; 
}); 

$("#"+_moveid,win.document).mouseup(function(e){ 
holdingHandler = false; 
}); 
//end setHandler 
})(); 
}, 
layerclose:function(__id,__win) 
{ 
$("#"+__id+"_background",__win).remove(); 
$("#"+__id,__win).remove(); 
}, 
layermaxindex:function() 
{ 
var ___index = 0; 
$.each($("*",___win___.document),function(i,n){ 
var __tem = $(n).css("z-index"); 
if(__tem>0) 
{ 
if(__tem > ___index) 
{ 
___index = __tem + 1; 
} 
} 
}); 
return ___index; 
} 
}); 
})(jQuery);

使用方法:

$.layerSetup({ 
id:"弹出层的ID", 
title:&#39;弹出层的标题文字&#39;, 
target:在哪个目标柜架弹出层如window.parent,默认为window.self, 
cssurl:&#39;弹出层的CSS样式文件的地址&#39;, 
content:&#39;弹出的内容&#39;, 
isbg:是否显示一个遮照层, 
templete:&#39;为层设置布局模板如:<div 
class="showwint_mini_title"><span class="showwint_mini_close_btn"><a 
href="javascript:void(null);" 
class="layerclose"></a></span><span 
class="showwint_mini_title_content" id="@moveid@"><span 
id="@titleid@"></span></span></div><div 
class="showwint_mini_content"><div class="showwint_mini_content_content" 
id="@contentid@"></div></div>&#39;, 
opacity:设置遮照层的透明度, 
width:宽, 
height:高 
}); 
$.layershow();

其中布局模板中的"@titleid@"、"@moveid@"、"@contentid@"、"@width@"、"@height@"为模板中放置标题ID、拖动ID、内容ID、宽、高等,可以根据你自己设计的模板不同放在不同的位置.  

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanEvolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Demystifying JavaScript: Apa yang berlaku dan mengapa pentingDemystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Adakah Python atau JavaScript lebih baik?Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AM

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.

Bagaimana saya memasang javascript?Bagaimana saya memasang javascript?Apr 05, 2025 am 12:16 AM

JavaScript tidak memerlukan pemasangan kerana ia sudah dibina dalam pelayar moden. Anda hanya memerlukan editor teks dan penyemak imbas untuk memulakan. 1) Dalam persekitaran penyemak imbas, jalankan dengan memasukkan fail HTML melalui tag. 2) Dalam persekitaran Node.js, selepas memuat turun dan memasang node.js, jalankan fail JavaScript melalui baris arahan.

Bagaimana cara menghantar pemberitahuan sebelum tugas bermula di kuarza?Bagaimana cara menghantar pemberitahuan sebelum tugas bermula di kuarza?Apr 04, 2025 pm 09:24 PM

Cara Menghantar Pemberitahuan Tugas di Quartz terlebih dahulu Apabila menggunakan pemasa kuarza untuk menjadualkan tugas, masa pelaksanaan tugas ditetapkan oleh ekspresi cron. Sekarang ...

Dalam JavaScript, bagaimana untuk mendapatkan parameter fungsi pada rantaian prototaip dalam pembina?Dalam JavaScript, bagaimana untuk mendapatkan parameter fungsi pada rantaian prototaip dalam pembina?Apr 04, 2025 pm 09:21 PM

Cara mendapatkan parameter fungsi pada rantaian prototaip dalam JavaScript dalam pengaturcaraan JavaScript, pemahaman dan memanipulasi parameter fungsi pada rantaian prototaip adalah tugas yang biasa dan penting ...

Apakah sebab kegagalan perpindahan gaya dinamik Vue.js dalam program WeChat Mini Webview?Apakah sebab kegagalan perpindahan gaya dinamik Vue.js dalam program WeChat Mini Webview?Apr 04, 2025 pm 09:18 PM

Analisis sebab mengapa kegagalan anjakan gaya dinamik menggunakan vue.js dalam pandangan web applet weChat menggunakan vue.js ...

Bagaimana untuk melaksanakan permintaan GET serentak untuk pelbagai pautan di Tampermonkey dan menentukan hasil pulangan dalam urutan?Bagaimana untuk melaksanakan permintaan GET serentak untuk pelbagai pautan di Tampermonkey dan menentukan hasil pulangan dalam urutan?Apr 04, 2025 pm 09:15 PM

Bagaimana untuk membuat permintaan serentak untuk pelbagai pautan dan hakim mengikut urutan untuk mengembalikan hasil? Dalam skrip Tampermonkey, kita sering perlu menggunakan pelbagai rantai ...

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan