Maison > Article > interface Web > Exemple d'analyse de la façon d'implémenter simplement l'effet pop-up jQuery

Exemple d'analyse de la façon d'implémenter simplement l'effet pop-up jQuery

小云云original: 2017-12-26 14:45:381447parcourir

Cet article vous apprend principalement comment implémenter simplement l'effet pop-up jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'exemple de cet article partage le code spécifique pour l'affichage de l'effet pop-up jQuery pour votre référence. Le contenu spécifique est le suivant

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

. Les points utilisés :

Création jQuery : $('e388a4556c0f65e1904146cc1a846bee');

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

Recommandations associées :

Comment résoudre le problème selon lequel la fenêtre contextuelle dans H5 ne peut pas être affichée à l'aide de WebView

Comment utiliser js en php pour transmettre des paramètres à la fenêtre pop-up

Page web personnalisée Petite fenêtre pop-up

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：Exemple détaillé de jQuery désactivant la fonction de remplissage automatique du nom d'utilisateur et du mot de passe du formulaireArticle suivant：Exemple détaillé de jQuery désactivant la fonction de remplissage automatique du nom d'utilisateur et du mot de passe du formulaire

Articles Liés

Voir plus