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效率调优经验
Jun 04 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
vue之nextTick全面解析
May 17 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
小程序实现短信登录倒计时
Jul 12 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设置允许大文件上传示例代码
2014/03/10 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python实现区域填充的示例代码
2021/02/03 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
this关键字的含义
2015/04/08 面试题
电脑饰品店的创业计划书
2014/01/21 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
公司员工检讨书
2014/02/08 职场文书
党员批评与自我批评
2014/10/15 职场文书
政审证明材料
2015/06/19 职场文书
辩论赛新闻稿
2015/07/17 职场文书
考试后的感想
2015/08/07 职场文书
详解Django的MVT设计模式
2021/04/29 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL