jQuery实现的两种简单弹窗效果示例

2019-11-19 14:00:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的两种简单弹窗效果。分享给大家供大家参考，具体如下：

这里利用jquery实现两种弹窗效果：

1. 淡入弹窗效果：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>www.VeVB.COm 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>    <div class="main">        <div class="mainbox">          <div class="close">点击关闭</div>        </div>      </div>    <div class="box">      <div class="kkk">        <input class="btn" type="button" value="点击淡入弹窗" />      </div>    </div>  </body></html>

运行效果：

2. 滑动弹窗效果：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>www.VeVB.COm 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>    <div class="main">        <div class="mainbox">          <div class="close">点击关闭</div>        </div>      </div>    <div class="box">      <div class="kkk">        <input class="btn" type="button" value="点击淡入弹窗" />      </div>    </div>  </body></html>

运行效果：