jQuery implémente l'effet pop-up (avec code)-js tutoriel-php.cn

jQuery implémente l'effet pop-up (avec code)

php中世界最好的语言

Libérer： 2018-04-23 11:09:58

original

3907 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery pour implémenter l'effet pop-up (avec code). Quelles sont les précautions pour que jQuery implémente l'effet pop-up. Ce qui suit est un cas pratique, voyons. jetez un oeil.

Ici, nous utilisons jquery pour obtenir deux effets de fenêtre contextuelle :

1 Effet de fenêtre contextuelle de fondu entrant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net 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>

Copier après la connexion

Effet de fonctionnement :

2. Effet de fenêtre contextuelle coulissante :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net 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>

Copier après la connexion

Effet de fonctionnement :

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 Web chinois de php !

Lecture recommandée :

Résumé de la méthode de tableau JS

Explication détaillée des étapes d'imitation js jquery

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!