jQuery+html5实现div弹出层并遮罩背景


Posted in Javascript onApril 15, 2015

渐入弹窗,背景变色不可点击。查看效果:http://runjs.cn/detail/t08gmoij

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</head>
<style type="text/css">
#popup{
  position: absolute;display:none; z-index:3000; background-color:#FFF; left: 601px; top: 217px; height: 150px; width: 217px;line-height:94px;text-align:center;
  border: 1px solid #03F;
}
#embedding{
  position: absolute; background-color: #36F; top: 94px;height:56px; width:217px;line-height:56px;text-align:center;
}
a{
  text-decoration:none;
  font-family:"微软雅黑";
  font-size:18px;
  color:#FFF;
}
</style>
<script type="text/javascript">
$(function(){
  var url = null;
  $(document).on('click','button',function(){
    var text = $(this).text();
    switch(text){
      case 'OSChina':url = 'http://www.oschina.net/';break;
      case 'baidu':url = 'http://www.baidu.com/';break;
      case 'CSDN':url = 'http://bbs.csdn.net/home';break;
      }
    $('#text').text('是否确定前往 '+text+' ?');
    $('#loadingDiv').css('display','block');  
    $('#popup').slideDown();
  }); 
  $(document).on('click','a',function(){
    if($(this).text()=='确定'){
      location.href=url;
    }else{
      $('#loadingDiv').css('display','none'); 
      $('#popup').slideUp();
    }
  });
});
</script>
<body>
<div id="loadingDiv" style="position:fixed;display:none;z-index:2000;top:0px;left:0px;width:100%;height:100%;background-color:rgba(255,255,0,0.5)"></div>
<div id="popup">
  <span id="text"></span>
  <div id="embedding">
    <a href="javascript:void(0)">确定</a>   
    <a href="javascript:void(0)">取消</a>
  </div>
</div>
<button style="position: absolute; left: 233px; top: 260px;" >OSChina</button>
<button style="position: absolute; left: 233px; top: 320px;" >baidu</button>
<button style="position: absolute; left: 233px; top: 380px;" >CSDN</button>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
jquery实现简单的无缝滚动
Apr 15 #Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 #Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 #Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
python实现清屏的方法
2015/04/30 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python清空命令行方式
2020/01/13 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
精伦电子Java笔试题
2013/01/16 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
小学生环保标语
2014/06/13 职场文书
趵突泉导游词
2015/02/03 职场文书
经理岗位职责范本
2015/04/15 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android