<!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="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function( $, undefined ) {
$.extend({
showDiv: function() {
var divBg = $('<div></div>');
var body_width,body_height;
//function width_height() {
body_width = $(window).width();
body_height = $(window).height();
//}
//window.onresize = width_height;
divBg.css({width:'200px', height:'200px', position:'absolute', left:'0', top:'0', backgroundColor:'red', zIndex:'99', opacity:'0'});
var $ceng = $("<div></div>")
$ceng.css({width:'50px', height:'50px', position:'absolute', left:body_width/2, top:body_height/2, border:'1px solid #000', fontSize:'15px', zIndex:'100'});
var $title = $('<div></div>');
$title.css({height:'10px'});
$btn = $('<div></div>');
$btn.css({width:'10px', height:'10px', backgroundColor:'black', float:'right'});
$btn.attr('id','btn');
$title.append($btn);
$ceng.append($title);
//divBg.append($ceng);
$('body').append(divBg);
$('body').append($ceng);
//$('#btn').click(function() {
//divBg.css('display', 'none');
//$ceng.css('display', 'none');
// });
}
});
}(jQuery));
$(function() {
$.showDiv();
});
</script>
</head><body>
<div></div></body>
</html>
为什么背景不出现呢？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function( $, undefined ) {
$.extend({
showDiv: function() {
var divBg = $('<div></div>');
var body_width,body_height;
//function width_height() {
body_width = $(window).width();
body_height = $(window).height();
//}
//window.onresize = width_height;
divBg.css({width:'200px', height:'200px', position:'absolute', left:'0', top:'0', backgroundColor:'red', zIndex:'99', opacity:'0'});
var $ceng = $("<div></div>")
$ceng.css({width:'50px', height:'50px', position:'absolute', left:body_width/2, top:body_height/2, border:'1px solid #000', fontSize:'15px', zIndex:'100'});
var $title = $('<div></div>');
$title.css({height:'10px'});
$btn = $('<div></div>');
$btn.css({width:'10px', height:'10px', backgroundColor:'black', float:'right'});
$btn.attr('id','btn');
$title.append($btn);
$ceng.append($title);
//divBg.append($ceng);
$('body').append(divBg);
$('body').append($ceng);
//$('#btn').click(function() {
//divBg.css('display', 'none');
//$ceng.css('display', 'none');
// });
}
});
}(jQuery));
$(function() {
$.showDiv();
});
</script>
</head><body>
<div></div></body>
</html>
为什么背景不出现呢？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var body_width,body_height;
function width_height() {
body_width = $(document).width();
body_height = $(document).height();
}
(function( $, undefined ) {
$.extend({
showDiv: function() {
var divBg = $('<div></div>');
divBg.css({width:body_width, height:body_height, position:'absolute', left:'0', top:'0', backgroundColor:'#ccc', zIndex:'99'});
var $ceng = $("<div></div>")
$ceng.css({width:'50px', height:'50px', position:'absolute', left:body_width/2, top:body_height/2, border:'1px solid #000', fontSize:'15px', zIndex:'100'});
var $title = $('<div></div>');
$title.css({height:'10px'});
$btn = $('<div></div>');
$btn.css({width:'10px', height:'10px', backgroundColor:'black', float:'right'});
$btn.attr('id','btn');
$title.append($btn);
$ceng.append($title);
//divBg.append($ceng);
$('body').append(divBg);
$('body').append($ceng);
$('#btn').click(function() {
divBg.css('display', 'none');
$ceng.css('display', 'none');
});
}
});
}(jQuery));
$(function() {
width_height();
$.showDiv();
});
window.onresize = function() {
width_height();
$('body').delete(divBg);
$('body').delete($ceng);
$.showDiv();
};
</script>
</head><body>
<div></div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var body_width,body_height;
function width_height() {
body_width = $(document).width();
body_height = $(document).height();
}
(function( $, undefined ) {
$.extend({
showDiv: function() {
var divBg = $('<div></div>');
divBg.css({width:body_width, height:body_height, position:'absolute', left:'0', top:'0', backgroundColor:'#ccc', zIndex:'99'});
var $ceng = $("<div></div>")
$ceng.css({width:'50px', height:'50px', position:'absolute', left:body_width/2, top:body_height/2, border:'1px solid #000', fontSize:'15px', zIndex:'100'});
var $title = $('<div></div>');
$title.css({height:'10px'});
$btn = $('<div></div>');
$btn.css({width:'10px', height:'10px', backgroundColor:'black', float:'right'});
$btn.attr('id','btn');
$title.append($btn);
$ceng.append($title);
//divBg.append($ceng);
$('body').append(divBg);
$('body').append($ceng);
$('#btn').click(function() {
divBg.css('display', 'none');
$ceng.css('display', 'none');
});
}
});
}(jQuery));
$(function() {
width_height();
$.showDiv();
});
window.onresize = function() {
width_height();
$('body').delete(divBg);
$('body').delete($ceng);
$.showDiv();
};
</script>
</head><body>
<div></div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于JQuery的JS遮罩层效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载，请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
} function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
} //关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
} </script>
<style type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg {
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}
#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main"> <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>在网上查了个，研究研究。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于JQuery的JS遮罩层效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
function showDiv() {
document.body.style.overflow = 'hidden';
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
var _div = document.createElement('div');
_div.className = 'divClass';
_div.setAttribute('id', 'divId');
document.body.appendChild(_div);
document.getElementById('divId').style.width = docWidth + 'px';
document.getElementById('divId').style.height = docHeight + 'px';
var _divAlert = document.createElement('div');
_divAlert.className = 'divalert';
_divAlert.id = 'divalert';
document.body.appendChild(_divAlert);
document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
var _divContent = document.createElement('div');
_divContent.id = 'divcontent';
_divAlert.appendChild(_divContent);
var _divbtn = document.createElement('div');
_divbtn.id = 'divbtn';
var _btn = document.createElement('input');
_btn.type = 'button';
_btn.value = '确定';
_btn.id = 'btn';
_divbtn.appendChild(_btn);
_divAlert.appendChild(_divbtn);
document.getElementById('btn').onclick = function() {
document.getElementById('divId').style.display = 'none';
document.getElementById('divalert').style.display = 'none';
document.body.style.overflow = 'auto';
}
}
function resizeDiv() {
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
}
window.onload = function() {
showDiv();
}
window.onresize = resizeDiv;
</script>
<style type="text/css">
body { margin:0; padding:0; }
.divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
.divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
#divcontent { height:60px; }
#divbtn { height:40px; background-color:#ddd; text-align:center; }
#btn { border:1px solid #000; margin-top:10px; }
</style>
</head>
<body>
<div style='height:1000px;'>fsfs</div>
</body>
</html>