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


Posted in jQuery onApril 18, 2018

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

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

1. 淡入弹窗效果:

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

运行效果:

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

2. 滑动弹窗效果:

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

运行效果:

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
php计算函数执行时间的方法
2015/03/20 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
Python的Flask框架的简介和安装方法
2015/11/13 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python 多线程串行和并行的实例
2019/02/22 Python
python实现整数的二进制循环移位
2019/03/08 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python openssl模块安装及用法
2020/12/06 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
合作意向协议书
2015/01/29 职场文书
营运督导岗位职责
2015/04/10 职场文书
公证书
2019/04/17 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python