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跨Iframe选择实现代码
Aug 19 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
js控制frameSet示例
2013/09/10 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
详谈python http长连接客户端
2017/06/12 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python for和else语句趣谈
2019/07/02 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
试用期自我鉴定范文
2014/03/20 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书