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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 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中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript Excel操作知识点
2009/04/24 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python3.x中自定义比较函数
2015/04/24 Python
详细介绍Python中的偏函数
2015/04/27 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
毕业生在校学习的自我评价分享
2013/10/08 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
优秀幼教自荐信
2014/02/03 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
个人安全生产责任书
2014/07/28 职场文书
营业员岗位职责范本
2015/04/14 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL