Maison interface Web js tutoriel 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需刷新才能执行]
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire s'il n'y a pas de rappels contextuels pour les événements du calendrier dans Win10 ? Comment récupérer si les rappels d'événements du calendrier ont disparu dans Win10 ? Que dois-je faire s'il n'y a pas de rappels contextuels pour les événements du calendrier dans Win10 ? Comment récupérer si les rappels d'événements du calendrier ont disparu dans Win10 ? Jun 09, 2024 pm 02:52 PM

Que dois-je faire s'il n'y a pas de rappels contextuels pour les événements du calendrier dans Win10 ? Comment récupérer si les rappels d'événements du calendrier ont disparu dans Win10 ?

Comment utiliser Vue pour implémenter des effets de fenêtre contextuelle Comment utiliser Vue pour implémenter des effets de fenêtre contextuelle Sep 22, 2023 am 09:40 AM

Comment utiliser Vue pour implémenter des effets de fenêtre contextuelle

Comment résoudre le problème des fenêtres pop-up Win11 qui ne peuvent pas être fermées Comment résoudre le problème des fenêtres pop-up Win11 qui ne peuvent pas être fermées Dec 22, 2023 pm 05:13 PM

Comment résoudre le problème des fenêtres pop-up Win11 qui ne peuvent pas être fermées

Que dois-je faire si des fenêtres pop-up apparaissent toujours dans Win11 ? Comment résoudre le problème des fenêtres pop-up lors de l'ouverture d'un logiciel sous Win11 ? Que dois-je faire si des fenêtres pop-up apparaissent toujours dans Win11 ? Comment résoudre le problème des fenêtres pop-up lors de l'ouverture d'un logiciel sous Win11 ? Mar 01, 2024 am 08:43 AM

Que dois-je faire si des fenêtres pop-up apparaissent toujours dans Win11 ? Comment résoudre le problème des fenêtres pop-up lors de l'ouverture d'un logiciel sous Win11 ?

Comment ouvrir la fenêtre pop-up du navigateur 360 Comment ouvrir la fenêtre pop-up du navigateur 360 Mar 28, 2024 pm 09:31 PM

Comment ouvrir la fenêtre pop-up du navigateur 360

HTML, CSS et jQuery : créez une interface avec des pop-ups de notification HTML, CSS et jQuery : créez une interface avec des pop-ups de notification Oct 26, 2023 pm 12:34 PM

HTML, CSS et jQuery : créez une interface avec des pop-ups de notification

Pourquoi les utilisateurs de Win11 continuent-ils à recevoir des fenêtres contextuelles de contrôle de compte ? Pourquoi les utilisateurs de Win11 continuent-ils à recevoir des fenêtres contextuelles de contrôle de compte ? Jan 08, 2024 am 11:30 AM

Pourquoi les utilisateurs de Win11 continuent-ils à recevoir des fenêtres contextuelles de contrôle de compte ?

Étapes pour supprimer les publicités pop-up dans le système win10 Étapes pour supprimer les publicités pop-up dans le système win10 Mar 27, 2024 pm 06:36 PM

Étapes pour supprimer les publicités pop-up dans le système win10

See all articles