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数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
销售演讲稿范文
2014/01/08 职场文书
通信研究生自荐信
2014/02/01 职场文书
个人函授自我鉴定
2014/03/25 职场文书
感恩教育活动总结
2014/05/05 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android