Heim Web-Frontend js-Tutorial js点击弹出div层实现可拖曳的弹窗效果_布局与层

js点击弹出div层实现可拖曳的弹窗效果_布局与层

May 16, 2016 pm 05:45 PM
弹窗

'; cwxbox.box.show(neirong); } C$('testClick1').onclick = function(){ var neirong = '123456789132456789'; cwxbox.box.show(neirong,3); } function C$(id){return document.getElementById(id);} //定义窗体对象 var cwxbox = {}; cwxbox.box = function(){ var bg,wd,cn,ow,oh,o = true,time = null; return { show:function(c,t,w,h){ if(o){ bg = document.createElement('div'); bg.id = 'cwxBg'; wd = document.createElement('div'); wd.id = 'cwxWd'; cn = document.createElement('div'); cn.id = 'cwxCn'; document.body.appendChild(bg); document.body.appendChild(wd); wd.appendChild(cn); bg.onclick = cwxbox.box.hide; window.onresize = this.init; window.onscroll = this.scrolls; o = false; } if(w && h){ var inhtml = ''; }else{ var inhtml = c; } cn.innerHTML = inhtml; oh = this.getCss(wd,'offsetHeight'); ow = this.getCss(wd,'offsetWidth'); this.init(); this.alpha(bg,50,1); this.drag(wd); if(t){ time = setTimeout(function(){cwxbox.box.hide()},t*1000); } }, hide:function(){ cwxbox.box.alpha(wd,0,-1); clearTimeout(time); }, init:function(){ bg.style.height = cwxbox.page.total(1)+'px'; bg.style.width = ''; bg.style.width = cwxbox.page.total(0)+'px'; var h = (cwxbox.page.height() - oh) /2; wd.style.top=(h+cwxbox.page.top())+'px'; wd.style.left=(cwxbox.page.width() - ow)/2+'px'; }, scrolls:function(){ var h = (cwxbox.page.height() - oh) /2; wd.style.top=(h+cwxbox.page.top())+'px'; }, alpha:function(e,a,d){ clearInterval(e.ai); if(d==1){ e.style.opacity=0; e.style.filter='alpha(opacity=0)'; e.style.display = 'block'; } e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40); }, ta:function(e,a,d){ var anum = Math.round(e.style.opacity*100); if(anum == a){ clearInterval(e.ai); if(d == -1){ e.style.display = 'none'; if(e == wd){ this.alpha(bg,0,-1); } }else{ if(e == bg){ this.alpha(wd,100,1); } } }else{ var n = Math.ceil((anum+((a-anum)*.5))); n = n == 1 ? 0 : n; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'; } }, getCss:function(e,n){ var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null); if(e_style.display === 'none'){ var clonDom = e.cloneNode(true); clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;'; document.body.appendChild(clonDom); var wh = clonDom[n]; clonDom.parentNode.removeChild(clonDom); return wh; } return e[n]; }, drag:function(e){ var startX,startY,mouse; mouse = { mouseup:function(){ if(e.releaseCapture) { e.onmousemove=null; e.onmouseup=null; e.releaseCapture(); }else{ document.removeEventListener("mousemove",mouse.mousemove,true); document.removeEventListener("mouseup",mouse.mouseup,true); } }, mousemove:function(ev){ var oEvent = ev||event; e.style.left = oEvent.clientX - startX + "px"; e.style.top = oEvent.clientY - startY + "px"; } } e.onmousedown = function(ev){ var oEvent = ev||event; startX = oEvent.clientX - this.offsetLeft; startY = oEvent.clientY - this.offsetTop; if(e.setCapture) { e.onmousemove= mouse.mousemove; e.onmouseup= mouse.mouseup; e.setCapture(); }else{ document.addEventListener("mousemove",mouse.mousemove,true); document.addEventListener("mouseup",mouse.mouseup,true); } } } } }() cwxbox.page = function(){ return{ top:function(){return document.documentElement.scrollTop||document.body.scrollTop}, width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}, height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}, total:function(d){ var b=document.body, e=document.documentElement; return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)): Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth)) } } }()
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Jun 09, 2024 pm 02:52 PM

Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind?

So implementieren Sie Popup-Fenstereffekte mit Vue So implementieren Sie Popup-Fenstereffekte mit Vue Sep 22, 2023 am 09:40 AM

So implementieren Sie Popup-Fenstereffekte mit Vue

So lösen Sie das Problem von Win11-Popup-Fenstern, die nicht geschlossen werden können So lösen Sie das Problem von Win11-Popup-Fenstern, die nicht geschlossen werden können Dec 22, 2023 pm 05:13 PM

So lösen Sie das Problem von Win11-Popup-Fenstern, die nicht geschlossen werden können

Was soll ich tun, wenn in Win11 immer Popup-Fenster angezeigt werden? Wie kann ich das Problem der Popup-Fenster beim Öffnen einer Software in Win11 lösen? Was soll ich tun, wenn in Win11 immer Popup-Fenster angezeigt werden? Wie kann ich das Problem der Popup-Fenster beim Öffnen einer Software in Win11 lösen? Mar 01, 2024 am 08:43 AM

Was soll ich tun, wenn in Win11 immer Popup-Fenster angezeigt werden? Wie kann ich das Problem der Popup-Fenster beim Öffnen einer Software in Win11 lösen?

So öffnen Sie das 360-Browser-Popup-Fenster So öffnen Sie das 360-Browser-Popup-Fenster Mar 28, 2024 pm 09:31 PM

So öffnen Sie das 360-Browser-Popup-Fenster

HTML, CSS und jQuery: Erstellen Sie eine Schnittstelle mit Benachrichtigungs-Popups HTML, CSS und jQuery: Erstellen Sie eine Schnittstelle mit Benachrichtigungs-Popups Oct 26, 2023 pm 12:34 PM

HTML, CSS und jQuery: Erstellen Sie eine Schnittstelle mit Benachrichtigungs-Popups

Warum erhalten Win11-Benutzer immer wieder Pop-ups zur Kontokontrolle? Warum erhalten Win11-Benutzer immer wieder Pop-ups zur Kontokontrolle? Jan 08, 2024 am 11:30 AM

Warum erhalten Win11-Benutzer immer wieder Pop-ups zur Kontokontrolle?

Schritte zum Entfernen von Popup-Anzeigen im Win10-System Schritte zum Entfernen von Popup-Anzeigen im Win10-System Mar 27, 2024 pm 06:36 PM

Schritte zum Entfernen von Popup-Anzeigen im Win10-System

See all articles