一个div显示的问题

问答首页 → Web前端技术

0 0

一个div显示的问题15

弱弱的请教一个问题。那种有一个div浮动显示，其余的内容成灰色，变成无效的效果怎么做的？
比如所：百度知道http://zhidao.baidu.com/点击登录后的效果

CSS

2009年10月10日 16:42

superhj1987
6
0 0 2

4个答案按时间排序按投票排序

0 0

采纳的答案

http://www.windsfly.cn/blog/default.asp?id=660
http://www.cnblogs.com/wjfluisfigo/archive/2009/01/15/1359309.html

2009年10月10日 16:48

lovewhzlq
13934
0 0 0

添加评论

0 0

主要涉及css几个属性
background （背景颜色）
opacity （透明度）
z-index （层叠）
就可以实现这个这些效果
通过设置z-index使登录面板显示在蒙版上面

2009年10月10日 16:57

chenkun925
49
0 0 0

添加评论

0 0

用js来控制。
当点击某个操作时js触发某个层显示，并设置它的长宽为屏幕大小，设置这个层的底色。
现在有很多第三方控件可以做到，不用你写那么多代码，比如jquery。
下面是我的例子：

var dialogFirst=true;
function dialog(title,content,width,height,cssName){
		
	if(dialogFirst==true){
	    var temp_float=new String;
	    //temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></div>";
	    temp_float="<iframe id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></iframe>";
	    temp_float+="<div id=\"floatBox\" class=\"floatBox\">";
	    temp_float+="<div class=\"title\"><h4></h4><span>关闭</span></div>";
	    temp_float+="<div class=\"content\"></div>";
	    temp_float+="</div>";
	    $("body").append(temp_float);
	    dialogFirst=false;
	}

	$("#floatBox .title span").click(function(){
	    $("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
	    $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();}); 
	});

	$("#floatBox .title h4").html(title);
	
	contentType=content.substring(0,content.indexOf(":"));
	content=content.substring(content.indexOf(":")+1,content.length);

	switch(contentType){
	    case "url":
		    var content_array=content.split("?");
		  
		    $("#floatBox .content").ajaxStart(function(){
		        $(this).html("loading...");
		    });
		    
		    $.ajax({
		        type:content_array[0],
		        url:content_array[1],
		        data:content_array[2],
		        beforeSend:function(r) {
		        	r.setRequestHeader('httpType','ajax');
		        },
			    error:function(e){
			        $("#floatBox .content").html("error...");
			    },
		        success:function(html){
		          $("#floatBox .content").html(html);
		        }
		    });
	  		break;
	  	case "text":
	  		$("#floatBox .content").html(content);
	  		break;
	  	case "id":
	  		$("#floatBox .content").html($('"#"+content').html());
	  		break;
	  	case "iframe":
	  		$("#floatBox .content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+(parseInt(height)-30)+"px"+"\" scrolling=\"false\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
	  		break;
	}

	$("#floatBoxBg").show();
	$("#floatBoxBg").animate({opacity:"0.5"},"normal");
	//$("#floatBox").attr("class","floatBox "+cssName);
	
	$("#floatBox").css({
		display:"block",
		left:(($(document).width())/2-(parseInt(width)/2))+"px",
		top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",
		width:width,
		height:height
	});
	
	$("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal"); 
//	$("#floatBox").animate({top:($(document).height()/2 - (parseInt(height)/2))+"px"},"normal");
}

在你需要弹出层的地方调用dialog这个函数就可以了，当然它需要jquery.js的支持。

2009年10月10日 16:54