Heim > Artikel > Web-Frontend > Beispielanalyse zur einfachen Implementierung des jQuery-Popup-Effekts

Beispielanalyse zur einfachen Implementierung des jQuery-Popup-Effekts

小云云Original: 2017-12-26 14:45:381448Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie den jQuery-Popup-Fenstereffekt einfach implementieren. Ich hoffe, dass er jedem helfen kann.

Das Beispiel in diesem Artikel teilt den spezifischen Code für die Anzeige des jQuery-Popup-Effekts als Referenz. Der spezifische Inhalt lautet wie folgt:

<!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 op=$(&#39;<p>&#39;);
   // $(&#39;body&#39;).append(op);

   $(&#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>

Die verwendeten Punkte:

jQuery-Erstellung: $('e388a4556c0f65e1904146cc1a846bee');

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

Verwandte Empfehlungen:

So lösen Sie das Problem, dass das Popup-Fenster in H5 nicht mit Webview geöffnet werden kann

So verwenden Sie js in PHP, um Parameter zu übergeben zum Popup-Fenster

Personalisierte Webseite Kleines Popup-Fenster

Das obige ist der detaillierte Inhalt vonBeispielanalyse zur einfachen Implementierung des jQuery-Popup-Effekts. 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：Detailliertes Beispiel für die Deaktivierung der Funktion zum automatischen Ausfüllen von Benutzernamen und Passwörtern in jQueryNächster Artikel：Detailliertes Beispiel für die Deaktivierung der Funktion zum automatischen Ausfüllen von Benutzernamen und Passwörtern in jQuery

In Verbindung stehende Artikel

Mehr sehen