jQuery實現的兩種簡單彈窗效果示例

2019-11-19 14:00:59

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的兩種簡單彈窗效果。分享給大家供大家參考，具體如下：

這里利用jquery實現兩種彈窗效果：

1. 淡入彈窗效果：

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

運行效果：