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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

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)

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êtres contextuelles nécessite des exemples de code spécifiques. Ces dernières années, avec le développement d'applications Web, les effets de fenêtres contextuelles sont devenus l'une des méthodes d'interaction couramment utilisées par les développeurs. En tant que framework JavaScript populaire, Vue offre des fonctions riches et une facilité d'utilisation, et est très approprié pour implémenter des effets de fenêtres contextuelles. Cet article expliquera comment utiliser Vue pour implémenter des effets de fenêtre contextuelle et fournira des exemples de code spécifiques. Tout d'abord, nous devons créer un nouveau projet Vue à l'aide de l'outil CLI de Vue. extrémité ouverte

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

Le calendrier peut aider les utilisateurs à enregistrer votre emploi du temps et même à définir des rappels. Cependant, de nombreux utilisateurs se demandent que faire si les rappels d'événements du calendrier n'apparaissent pas dans Windows 10 ? Les utilisateurs peuvent d'abord vérifier l'état de la mise à jour Windows ou vider le cache du Windows App Store pour effectuer l'opération. Laissez ce site présenter soigneusement aux utilisateurs l'analyse du problème du rappel des événements du calendrier Win10 qui n'apparaît pas. Pour ajouter des événements au calendrier, cliquez sur le programme "Calendrier" dans le menu système. Cliquez avec le bouton gauche de la souris sur une date du calendrier. Entrez le nom de l'événement et l'heure du rappel dans la fenêtre d'édition, puis cliquez sur le bouton « Enregistrer » pour ajouter l'événement. Résoudre le problème du rappel d'événement du calendrier Win10 qui n'apparaît pas

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

Je crois que lorsque nous utilisons l'ordinateur, nous sommes tous gênés par les fenêtres contextuelles qui apparaissent involontairement. Surtout après la mise à jour du système, nous avons même rencontré le problème que la fenêtre contextuelle Win11 ne peut pas être fermée pour le moment. fermez-le uniquement dans le gestionnaire de tâches. Solution au problème selon lequel la fenêtre contextuelle Win11 ne peut pas être fermée : 1. Appuyez d'abord sur la combinaison de touches "Win+R" du clavier pour ouvrir Exécuter. 2. Entrez ensuite « msconfig » et appuyez sur Entrée pour exécuter. 3. Entrez ensuite « Démarrage » et cliquez sur « Ouvrir le Gestionnaire des tâches ». 4. Sélectionnez ensuite l'application qui apparaît sous les options de démarrage. 5. Enfin, cliquez sur « Désactiver » dans le coin inférieur droit.

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

Les fenêtres contextuelles peuvent être ouvertes et utilisées par elles-mêmes dans le navigateur 360. Certains utilisateurs ne savent pas comment ouvrir les fenêtres contextuelles dans le navigateur 360. Décochez simplement la case dans les paramètres avancés pour interdire à tout site Web d'afficher des fenêtres contextuelles. . Cette fenêtre contextuelle ouvrant l'introduction de la méthode de réglage vous indiquera la méthode de fonctionnement spécifique. Ce qui suit est une introduction détaillée, alors jetez-y un œil. Comment ouvrir la fenêtre pop-up du navigateur 360 ? Réponse : Décochez la case dans les paramètres avancés pour ne permettre à aucun site Web d'afficher des fenêtres pop-up. Introduction détaillée : 1. Ouvrez le navigateur 360 et cliquez sur [Paramètres]. ] en haut à droite. 2. Sélectionnez [Options]. 3. Cliquez sur [Paramètres avancés] dans la liste de gauche. 4. Décochez [Ne permettre à aucun site Web d'afficher des fenêtres contextuelles].

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

Lors de l'utilisation du système Win11, une fenêtre contextuelle apparaît parfois lors de l'ouverture d'un certain logiciel, ce qui affectera l'expérience utilisateur. Cet article explique comment résoudre le problème des fenêtres contextuelles lors de l'ouverture d'un logiciel sous Win11 et aide les utilisateurs à résoudre ce problème. Méthode 1 : 1. Appuyez sur la combinaison de touches [Win+S] ou cliquez sur [Icône de recherche] à côté de l'icône de démarrage dans la barre des tâches. Dans la recherche Windows ouverte, saisissez [Panneau de configuration] dans la zone de recherche, puis cliquez sur. pour ouvrir le système correspondant à la meilleure [Application du Panneau de configuration] ; 2. Pour toutes les fenêtres d'éléments du panneau de configuration, passez en mode d'affichage [Grandes icônes], puis recherchez et cliquez sur [Sécurité et maintenance] sous Ajuster les paramètres de l'ordinateur ; Fenêtre de maintenance, clic gauche sur [Modifier les paramètres de contrôle de compte d'utilisateur] ; 4. Utilisateur ;

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

Parfois, lorsque nous ouvrons un logiciel ou un programme, nous constatons que le contrôle du compte utilisateur Win11 continue d'apparaître, mais nous ne savons pas pourquoi. En fait, il s'agit d'un moyen de protection du système pour nous empêcher d'être envahis par de mauvais logiciels. Pourquoi le contrôle du compte utilisateur Win11 continue-t-il d'apparaître : R : Étant donné que le contrôle du compte utilisateur Win11 est activé, une fois activé, le système continuera à apparaître pour vous le rappeler afin de protéger la sécurité de l'ordinateur et d'empêcher qu'il ne soit envahi. mauvais logiciel. Le contrôle de compte d'utilisateur Win11 continue de jouer Solution 1. Si nous trouvons difficile de continuer à jouer, nous souhaitons le fermer. 2. Ensuite, vous pouvez cliquer sur le « Menu Démarrer » en bas. 3. Ensuite, recherchez et ouvrez « Modifier les paramètres de contrôle de compte d'utilisateur ». 4. Enfin, déplacez le curseur de gauche sur « Ne jamais notifier » et « OK » pour enregistrer.

É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

1. Ouvrez 360 Security Guard avec la souris et cliquez sur Plus dans le coin inférieur droit, comme indiqué dans l'image : 2. Recherchez l'interception de pop-up dans l'interface ou saisissez l'interception de pop-up dans la zone de recherche et cliquez pour ouvrir, comme montré dans l'image : 3. Dans l'interface, cliquez sur Interception puissante, puis cliquez sur Activer dans la fenêtre d'invite, comme indiqué dans la figure :

Développement de composants Vue : méthode d'implémentation de composants contextuels Développement de composants Vue : méthode d'implémentation de composants contextuels Nov 24, 2023 am 09:28 AM

Développement de composants Vue : méthode d'implémentation de composants pop-up Introduction : Dans le développement front-end, le composant pop-up est un type de composant courant et important. Il peut être utilisé pour afficher du contenu interactif tel que des informations rapides, des confirmations ou des zones de saisie sur des pages Web. Cet article expliquera comment utiliser le framework Vue pour développer un composant contextuel simple et fournira des exemples de code spécifiques. 1. Conception de la structure du composant Lors de la conception de la structure du composant de fenêtre pop-up, nous devons prendre en compte les éléments suivants : Titre de la fenêtre pop-up : utilisé pour afficher les informations sur le titre de la fenêtre pop-up. Contenu de la fenêtre pop-up : permet d'afficher le contenu spécifique de la fenêtre pop-up. bombe

See all articles