基于jquery的模态div层弹出效果
经过几多周折，终于搞出来了，效果图如下： 
具体实现：
(1) 编写 jquery.divbox.js 的代码：
代码如下:
jQuery.fn.extend(
{
OpenDiv: function()
{
var sWidth, sHeight;
sWidth = window.screen.availWidth;
if (window.screen.availHeight > document.body.scrollHeight)
{
sHeight = window.screen.availHeight;
} else
{
sHeight = document.body.scrollHeight + 20;
}
var maskObj = document.createElement("div");
maskObj.setAttribute('id', 'BigDiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#111";
maskObj.style.filter = "Alpha(opacity=70);";
maskObj.style.opacity = "0.7";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
$("body").attr("scroll", "no");
document.body.appendChild(maskObj);
$("#BigDiv").data("divbox_selectlist", $("select:visible"));
$("select:visible").hide();
$("#BigDiv").attr("divbox_scrolltop", $.ScrollPosition().Top);
$("#BigDiv").attr("divbox_scrollleft", $.ScrollPosition().Left);
$("#BigDiv").attr("htmloverflow", $("html").css("overflow"));
$("html").css("overflow", "hidden");
window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop"));
var MyDiv_w = this.width();
var MyDiv_h = this.height();
MyDiv_w = parseInt(MyDiv_w);
MyDiv_h = parseInt(MyDiv_h);
var width = $.PageSize().Width;
var height = $.PageSize().Height;
var left = $.ScrollPosition().Left;
var top = $.ScrollPosition().Top;
var Div_topposition = top + (height / 2) - (MyDiv_h / 2);
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2);
this.css("position", "absolute");
this.css("z-index", "10001");
this.css("background", "#fff");
this.css("left", Div_leftposition + "px");
this.css("top", Div_topposition + "px");
if ($.browser.mozilla)
{
this.show();
return;
}
this.fadeIn("fast");
}
, CloseDiv: function()
{
if ($.browser.mozilla)
{
this.hide();
} else
{
this.fadeOut("fast");
} $("html").css("overflow", $("#BigDiv").attr("htmloverflow"));
window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop"));
$("#BigDiv").data("divbox_selectlist").show();
$("#BigDiv").remove();
}
});
$.extend(
{
PageSize:function ()
{
var width=0;
var height=0;
width=window.innerWidth!=null?window.innerWidth:document.documentElement&&document.documentElement.clientWidth?document.documentElement.clientWidth:document.body!=null?document.body.clientWidth:null;
height=window.innerHeight!=null?window.innerHeight:document.documentElement&&document.documentElement.clientHeight?document.documentElement.clientHeight:document.body!=null?document.body.clientHeight:null;
return {Width:width,Height:height};
}
,ScrollPosition:function ()
{
var top=0,left=0;
if($.browser.mozilla)
{
top=window.pageYOffset;
left=window.pageXOffset;
}
else if($.browser.msie)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
else if(document.body)
{
top=document.body.scrollTop;
left=document.body.scrollLeft;
}
return {Top:top,Left:left};
}
});
(2) 网页中需引用两个js， jquery.divbox.js 和 jquery.js
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.divbox.js"></script>
<style>
#divSCA
{
position: absolute;
width: 700px;
height: 500px;
font-size: 12px;
background: #fff;
border: 0px solid #000;
z-index: 10001;
display: none;
}
</style>
<script type="text/javascript">
function openDiv() {
$("#divSCA").OpenDiv();
}
function closeDiv() {
$("#divSCA").CloseDiv();
}
</script>
</head>
<body>
<div id="divSCA">
<font size="50">这是模态DIV,点击关闭</font>
<input type="button" value="关闭" onclick="closeDiv()">
</div>
<input type="button" value="弹出" onclick="openDiv()"/>
测试能否覆盖 select
<select>
<option>测试1</option>
<option>测试2</option>
<option>测试3</option>
</select>
</body>
</html>
(4) 测试代码及源文件下载地址：
点击下载
相关推荐
-
两种方法基于jQuery实现IE浏览器兼容placeholder效果
placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持pl
-
jQuery操作之效果详解
效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style="display: none">Hello</p> <input id="btn1" type="button" value="切换"/> jQuery代码: $("p").show(); 开始P是隐藏
-
基于jquery的loading 加载提示效果实现代码
loading 加载提示 ······ 透明遮罩 居中 复制代码 代码如下: body{ margin: 0; font-size: 12px; line-height: 100%; font-family: Arial, sans-serif; } .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; posit
-
六款帮助你实现惊艳视差滚动效果的jQuery插件
在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向
-
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u
-
用jquery实现下拉菜单效果的代码
效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>
-
jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
-
基于jquery的仿百度搜索框效果代码
先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT
-
Jquery代码实现图片轮播效果（一）
文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示 下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播
-
基于JQuery的实现图片轮播效果(焦点图)
完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu