jQuery+html5实现div弹出层并遮罩背景

渐入弹窗,背景变色不可点击。查看效果: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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2015-04-14

JS遮罩层效果 兼容ie firefox jQuery遮罩层

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jquery弹出关闭遮罩层实例

复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery简便实现遮罩层

jQuery+AJAX实现遮罩层登录验证界面(附源码)

JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外的其他元素:点击注册框上的"随便逛逛",遮罩层消失. 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平.垂直居中,包括鼠标滚轮上下滚动页面.缩放页面和调整浏览器窗口大小时 主要由CSS控制,注册框的宽度和高度都已经确定( 620*420px ),首先使用position:fixed来使它

jquery 圆角遮罩图片实现图片圆角

运行后请刷新一次. 圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15 $(function(){ $(".kuang").after(" "); }) li{ list-style:none; float:left; margin-right:20px; margin-top:20px; position:relative; } img{ border:0; width:94px; height:94px; } .kuang_div{ positi

jQuery+css+html实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g

jQuery实现可兼容IE6的遮罩功能详解

本文实例讲述了jQuery实现可兼容IE6的遮罩功能.分享给大家供大家参考,具体如下: 最精简,最强大的 jQuery 遮罩层效果. 当浏览器改变大小时,遮罩层的大小会相应地改变. 遮罩层上方的对话框可随 scroll 的改变而改变,即对话框在浏览器居中显示. HTML 代码 <div id="main"><a onclick="showBg();" href="#" rel="external nofollow&qu

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

JQuery 遮罩层实现(mask)实现代码

其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较"庞大"的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现.好了不多说,上我的代码

jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

jquery下实现overlay遮罩层代码

复制代码 代码如下: /* 模态遮罩层单例对象 opacity:背景透明度 1. show() 2. close() */ Q.Overlay = function(opacity) { var self = this; self._createDiv = function() { if (self._overlay) return; self._overlay = $("<div></div>"); var overlayCss = { 'width': '1

jQuery实现的页面遮罩层功能示例【测试可用】

本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

jQuery下拉菜单的实现代码

jQuery是一款流行已久的Javascript框架,确实很好用.今天我给大家介绍jquery下拉菜单的实现代码,具体代码如下所述: <!DOCTYPE html> <head lang="en"> <meta charset="UTF-8"> * { padding: 0; margin: 0; ul { list-style: none; .wrap { width: 730px; height: 50px; margin:

jquery实现简单的遮罩层

本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa

jquery实现居中弹出层代码

复制代码 代码如下: /* 弹出窗口定位到浏览器中间 1. show(options{ height:高度 width:宽度 speed:渐显时间 默认0 container:包含的html内容的jquery对象 model:是否是模态窗口,默认true,模态对话框就是在弹层下面在覆盖遮罩层,参考上篇文章Overlay实现 }) 2. close(speed:淡出时间 默认0) */ Q.Panel = function() { var self = this; self._resetPosit

使用jQuery制作Web页面遮罩层插件的实例教程

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

简单的Jquery遮罩层代码实例

Css代码 复制代码 代码如下: #brg{ width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position: absolute; top: 0; left: 0; display: none;}#showdiv{ width: 100%; height: au

jQuery阻止移动端遮罩层后页面滚动

css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla