为什么背景不出现呢？

一天要饭生活又开始啦 2013-05-13 04:23:23

<!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>

为什么背景不出现呢？

...全文

127 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2013-05-14

打赏
举报

1好眼神啊，佩服。

一天要饭生活又开始啦 2013-05-14

打赏
举报

    <!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>基于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>

在网上查了个，研究研究。。。。。。。。。。。。。。

一天要饭生活又开始啦 2013-05-14

打赏
举报

引用 5 楼 KK3K2005 的回复:

{width:body_width +'px'

不行啊

一天要饭生活又开始啦 2013-05-14

打赏
举报

alert弹出层初步替代代码展示

一天要饭生活又开始啦 2013-05-14

打赏
举报

alert弹出层出版替代代码展示

    <!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>基于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>

KK3K2005 2013-05-13

打赏
举报

{width:body_width +'px'

一天要饭生活又开始啦 2013-05-13

打赏
举报

引用 1 楼 KK3K2005 的回复:

opacity: 0; 兄弟你太坑啦还混这个在里面

满背景的遮罩层如何写啊？

一天要饭生活又开始啦 2013-05-13

打赏
举报

引用 1 楼 KK3K2005 的回复:

opacity: 0; 兄弟你太坑啦还混这个在里面

哦，改成1吧，还有个问题，主要是，当窗口调节大小时，如何保证背景大小也跟着跳着啊，我为什么总是做不出呢？

<!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>
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>

一天要饭生活又开始啦 2013-05-13

打赏
举报

哦，改成1吧，还有个问题，主要是，当窗口调节大小时，如何保证背景大小也跟着跳着啊，我为什么总是做不出呢？

<!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>
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>

KK3K2005 2013-05-13