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 KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

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)

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

Für die Verwendung von Vue zum Implementieren von Popup-Fenstereffekten sind spezifische Codebeispiele erforderlich. Mit der Entwicklung von Webanwendungen sind Popup-Fenstereffekte in den letzten Jahren zu einer der am häufigsten verwendeten Interaktionsmethoden unter Entwicklern geworden. Als beliebtes JavaScript-Framework bietet Vue umfangreiche Funktionen und Benutzerfreundlichkeit und eignet sich sehr gut für die Implementierung von Popup-Fenstereffekten. In diesem Artikel wird erläutert, wie Sie mit Vue Popup-Fenstereffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir mit dem CLI-Tool von Vue ein neues Vue-Projekt erstellen. offenes Ende

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

Der Kalender kann Benutzern dabei helfen, Ihren Zeitplan aufzuzeichnen und sogar Erinnerungen festzulegen. Viele Benutzer fragen sich jedoch, was zu tun ist, wenn in Windows 10 keine Erinnerungen an Kalenderereignisse angezeigt werden. Benutzer können zunächst den Windows-Update-Status überprüfen oder den Windows App Store-Cache leeren, um den Vorgang auszuführen. Lassen Sie diese Website den Benutzern die Analyse des Problems, dass die Kalenderereigniserinnerung in Win10 nicht angezeigt wird, sorgfältig vorstellen. Um Kalenderereignisse hinzuzufügen, klicken Sie im Systemmenü auf das Programm „Kalender“. Klicken Sie mit der linken Maustaste auf ein Datum im Kalender. Geben Sie im Bearbeitungsfenster den Namen des Ereignisses und die Erinnerungszeit ein und klicken Sie auf die Schaltfläche „Speichern“, um das Ereignis hinzuzufügen. Lösung des Problems, dass die Erinnerung an Win10-Kalenderereignisse nicht angezeigt wird

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

Ich glaube, dass wir alle Probleme mit Popup-Fenstern haben, die unbeabsichtigt auftauchen. Nach der Aktualisierung des Systems sind wir sogar auf das Problem gestoßen, dass das Win11-Popup-Fenster derzeit nicht geschlossen werden kann Schließen Sie es nur im Task-Manager. Lösung des Problems, dass das Win11-Popup-Fenster nicht geschlossen werden kann: 1. Drücken Sie zunächst die Tastenkombination „Win+R“ auf der Tastatur, um Ausführen zu öffnen. 2. Geben Sie dann „msconfig“ ein und drücken Sie die Eingabetaste, um es auszuführen. 3. Geben Sie dann „Startup“ ein und klicken Sie auf „Task-Manager öffnen“. 4. Wählen Sie dann die Anwendung aus, die unter den Startoptionen angezeigt wird. 5. Klicken Sie abschließend unten rechts auf „Deaktivieren“.

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

Popup-Fenster können im 360-Browser selbst geöffnet und verwendet werden. Einige Benutzer wissen nicht, wie sie Popup-Fenster im 360-Browser öffnen können. Deaktivieren Sie einfach das Kontrollkästchen in den erweiterten Einstellungen, um zu verhindern, dass Websites Popup-Fenster anzeigen . Dieses Popup-Fenster öffnet die Einführung der Einstellungsmethode und zeigt Ihnen die spezifische Betriebsmethode an. Im Folgenden finden Sie eine detaillierte Einführung. Wie öffne ich das 360-Browser-Popup-Fenster? Antwort: Deaktivieren Sie das Kontrollkästchen in den erweiterten Einstellungen, um zu verhindern, dass auf einer Website Pop-up-Fenster angezeigt werden: 1. Öffnen Sie den 360-Browser und klicken Sie auf „Einstellungen“. ]-Symbol oben rechts. 2. Wählen Sie [Option]. 3. Klicken Sie in der Liste links auf [Erweiterte Einstellungen]. 4. Deaktivieren Sie [Keine Website darf Popup-Fenster anzeigen].

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

Wenn wir Software oder Programme öffnen, werden wir manchmal feststellen, dass die Win11-Benutzerkontensteuerung immer wieder angezeigt wird, aber wir wissen nicht, warum. Tatsächlich handelt es sich dabei um eine Möglichkeit zum Systemschutz, um zu verhindern, dass uns schädliche Software angreift. Warum wird die Win11-Benutzerkontensteuerung immer wieder angezeigt? A: Weil die Win11-Benutzerkontensteuerung aktiviert ist. Nach dem Einschalten wird das System immer wieder angezeigt, um Sie daran zu erinnern, die Sicherheit Ihres Computers zu schützen und Angriffe zu verhindern schlechte Software. Die Win11-Benutzerkontensteuerung läuft weiter. Lösung 1. Wenn es für uns problematisch ist, weiterzuspielen, möchten wir es schließen. 2. Dann können Sie unten auf das „Startmenü“ klicken. 3. Suchen Sie dann nach „Benutzerkontensteuerungseinstellungen ändern“ und öffnen Sie es. 4. Bewegen Sie abschließend den linken Schieberegler auf „Nie benachrichtigen“ und klicken Sie zum Speichern auf „OK“.

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

Bei Verwendung des Win11-Systems erscheint beim Öffnen einer bestimmten Software manchmal ein Popup-Fenster, das sich auf die Benutzererfahrung auswirkt. In diesem Artikel erfahren Sie, wie Sie das Problem der Popup-Fenster beim Öffnen einer Software unter Win11 lösen können, und helfen Benutzern bei der Lösung dieses Problems. Methode 1: 1. Drücken Sie die Tastenkombination [Win+S] oder klicken Sie auf das [Suchsymbol] neben dem Startsymbol in der Taskleiste. Geben Sie in der geöffneten Windows-Suche [Systemsteuerung] in das Suchfeld ein und klicken Sie dann um das System zu öffnen. Beste Übereinstimmung [Systemsteuerungsanwendung]; 2. Wechseln Sie für alle Systemsteuerungselementfenster in den Anzeigemodus [Große Symbole] und klicken Sie dann unter „Computereinstellungen anpassen“ auf „Sicherheit und Wartung“. Fenster, links Klicken Sie auf die Seite [Benutzerkontensteuerungseinstellungen ändern];

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

1. Öffnen Sie 360 ​​Security Guard mit der Maus und klicken Sie unten rechts auf „Mehr“ (siehe Abbildung): 2. Suchen Sie in der Benutzeroberfläche nach „Pop-up-Interception“ oder geben Sie „Pop-up-Interception“ in das Suchfeld ein und klicken Sie zum Öffnen auf „Als“. Wie im Bild gezeigt: 3. Klicken Sie in der Benutzeroberfläche auf „Powerful Interception“ und dann im Eingabeaufforderungsfenster auf „Aktivieren“, wie in der Abbildung gezeigt:

Entwicklung von Vue-Komponenten: Implementierungsmethode für Popup-Komponenten Entwicklung von Vue-Komponenten: Implementierungsmethode für Popup-Komponenten Nov 24, 2023 am 09:28 AM

Vue-Komponentenentwicklung: Implementierungsmethode für Popup-Komponenten Einführung: In der Front-End-Entwicklung sind Popup-Komponenten ein häufiger und wichtiger Komponententyp. Damit können interaktive Inhalte wie Aufforderungsinformationen, Bestätigungs- oder Eingabefelder auf Webseiten angezeigt werden. In diesem Artikel wird erläutert, wie Sie mit dem Vue-Framework eine einfache Popup-Komponente entwickeln und spezifische Codebeispiele bereitstellen. 1. Komponentenstrukturdesign Beim Entwerfen der Struktur der Popup-Fensterkomponente müssen wir die folgenden Elemente berücksichtigen: Titel des Popup-Fensters: Wird zum Anzeigen der Titelinformationen des Popup-Fensters verwendet. Inhalt des Popup-Fensters: Wird verwendet, um den spezifischen Inhalt des Popup-Fensters anzuzeigen. Bombe

See all articles