Heim > Web-Frontend > js-Tutorial > Hauptteil

So erstellen Sie mit jQuery einen Popup-Fenstereffekt

php中世界最好的语言
Freigeben: 2017-12-31 11:36:59
Original
2222 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit jQuery einen Popup-Fenstereffekt erstellen. Dieser Artikel gibt Ihnen eine detaillierte Analyse.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹窗</title>
  <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
  
  <style type="text/css">
   *{margin: 0px;padding: 0px;}
   #login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }
   #close{position: absolute;right: 0px;top: 0px;}
  </style>
  
  
  <script type="text/javascript">
  
  // JS创建一个p标签,也就是节点元素
  // window.onload=function(){
  //  document.createElement(&#39;p&#39;);
  // }
  
  // 使用jQuery创建:$(&#39;<p>&#39;);带尖括号的是创建,不带是选择的意思
  $(function(){
   // var oDiv=$(&#39;<p>&#39;);
   // $(&#39;body&#39;).append(oDiv);
  
   $(&#39;input&#39;).click(function(){
   var oLogin=$(&#39;<p id="login"><p>用户名<input type="text"></p><p>密码<input type="text"></p><p id="close">X</p></p>&#39;);//此功能就相当于body中注释的代码
  
   $(&#39;body&#39;).append(oLogin);
   oLogin.css(&#39;left&#39;,($(window).width()-oLogin.outerWidth())/2);
   oLogin.css(&#39;top&#39;,($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间
  
   $("#close").click(function(){
    oLogin.remove();
   })
  
   // jquery 中$()里window不用加引号
   // 添加resize()浏览器窗口大小改变
   // scroll():滚动条,以下的作用是当滚动条滚动时候,弹窗的位置也不变化
   $(window).on("resize scroll",function(){
    oLogin.css(&#39;left&#39;,($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
    oLogin.css(&#39;top&#39;,($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
   })
  
   });
  
  });
  
  </script>
</head>
<body>
 <input type="button" value="点击">
 <!-- <p id="login">
  <p>用户名<input type="text"></p>
  <p>密码<input type="text"></p>
  <p id="close">X</p>
 </p> -->
</body>
</html>
Nach dem Login kopieren


Verwendete Punkte:

jQuery-Erstellung:

$(&#39;<p>&#39;);
Nach dem Login kopieren

Position des Popup-Fensters:

oLogin.css(&#39;left&#39;,($(window).width()-oLogin.outerWidth())/2);
oLogin.css(&#39;top&#39;,($(window).width()-oLogin.outerHeight())/2);
Nach dem Login kopieren

Wenn die Bildlaufleiste scrollt, ändert sich die Position des Popup-Fensters:

$(window).on("resize scroll",function(){
oLogin.css(&#39;left&#39;,($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css(&#39;top&#39;,($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
   })
Nach dem Login kopieren

Ich glaube, Sie haben die Methode nach dem Lesen der obigen Einführung gemeistert Informationen, bitte beachten Sie andere verwandte Themen im Artikel über die chinesische PHP-Website!

Verwandte Lektüre:


Wie kann Ajax lokales JSON lesen?

Wie ES6 verwendet die Set-Datenstruktur, um Arrays zu betreiben

Über HTTP/2-Server-Push

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit jQuery einen Popup-Fenstereffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage