recherche

Maison >interface Web >js tutoriel >Deux méthodes pour implémenter la fonction de fenêtre contextuelle

Deux méthodes pour implémenter la fonction de fenêtre contextuelle

php中世界最好的语言
php中世界最好的语言original
2018-06-07 14:46:582196parcourir

Cette fois, je vais vous présenter deux méthodes pour implémenter la fonction de fenêtre pop-up. Quelles sont les précautions à prendre pour implémenter la fonction de fenêtre pop-up ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Ici, nous utilisons jquery pour obtenir deux effets pop-up :

1. Effet de fondu en pop-up : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery弹窗</title>
    <style>
      *{padding: 0;margin: 0;}
      .box{width: 100%;height: 100%;}
      .main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
      .mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;}
      .kkk{width: 100%;height: 1200px;background-color: red;}
      .close{color: red;cursor: pointer;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(function(){
        $(".btn").click(function(){
          $(".main").fadeIn();
        });
        $(".close").click(function(){
          $(".main").fadeOut();
        });
      });
    </script>
  </head>
  <body>
    <p class="main">
        <p class="mainbox">
          <p class="close">点击关闭</p>
        </p>
      </p>
    <p class="box">
      <p class="kkk">
        <input class="btn" type="button" value="点击淡入弹窗" />
      </p>
    </p>
  </body>
</html>

2. Effet de fenêtre contextuelle Slide Moving : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> jQuery弹窗</title>
    <style>
      *{padding: 0;margin: 0;}
      .box{width: 100%;height: 100%;}
      .main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
      .mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;display: none;}
      .kkk{width: 100%;height: 1200px;background-color: red;}
      .close{color: red;cursor: pointer;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(function(){
        $(".btn").click(function(){
          $(".main").fadeIn();
          $(".mainbox").delay(500).slideDown();
        });
        $(".close").click(function(){
          $(".main").fadeOut();
        });
      });
    </script>
  </head>
  <body>
    <p class="main">
        <p class="mainbox">
          <p class="close">点击关闭</p>
        </p>
      </p>
    <p class="box">
      <p class="kkk">
        <input class="btn" type="button" value="点击淡入弹窗" />
      </p>
    </p>
  </body>
</html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Projet de modèle de nouveau webpack cli

Comment appeler des bibliothèques tierces dans Angular

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 obtenir et afficher des mots de passe en temps réel dans AngularJSArticle suivant：Comment obtenir et afficher des mots de passe en temps réel dans AngularJS

Articles Liés

Voir plus