suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit jQuery einen Popup-Fenstereffekt

So erstellen Sie mit jQuery einen Popup-Fenstereffekt

php中世界最好的语言
php中世界最好的语言Original
2017-12-31 11:36:592223Durchsuche

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>


Verwendete Punkte:

jQuery-Erstellung: 

$(&#39;<p>&#39;);

Position des Popup-Fensters: 

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

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());
   })

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!

Stellungnahme：
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
Vorheriger Artikel：So erstellen Sie Tabs in JSNächster Artikel：So erstellen Sie Tabs in JS

In Verbindung stehende Artikel

Mehr sehen