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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
Vue的props父传子的示例代码
May 20 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
Three.js基础学习教程
2017/11/16 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python实现文件的备份流程详解
2019/06/18 Python
tensorflow 变长序列存储实例
2020/01/20 Python
如何在pycharm中安装第三方包
2020/10/27 Python
HTML5标签大全
2016/11/23 HTML / CSS
总务岗位职责
2013/11/19 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
九年级科学教学反思
2014/01/29 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
python manim实现排序算法动画示例
2022/08/14 Python