Maison > Article > interface Web > Comment créer un effet de fenêtre pop-up avec jQuery

Comment créer un effet de fenêtre pop-up avec jQuery

php中世界最好的语言original: 2017-12-31 11:36:592206parcourir

Ce que je vais vous montrer cette fois, c'est comment créer un effet de fenêtre pop-up avec jQuery. L'effet de fenêtre pop-up est souvent utilisé dans nos projets. Cet article vous donnera une analyse détaillée.

<!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>

Points utilisés :

Création jQuery :

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

Position de la fenêtre pop-up :

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

Lorsque la barre de défilement défile, la position de la fenêtre contextuelle change :

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

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour plus d'excitation. Pour plus d'informations, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture connexe :

Comment ajax peut-il lire le json local

Comment ES6 utilise la structure de données Set pour faire fonctionner les tableaux

À propos du push du serveur HTTP/2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

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

Article précédent：Comment créer des onglets en JSArticle suivant：Comment créer des onglets en JS

Articles Liés

Voir plus