ถามเรื่อง jquery overlay หน่อยครับ

 พีดีลองนำไปใช้งานจะใส่ภาพแสดงเป็น box แต่เจอปัญหาคือว่า ภาพมันจางไปเลยครับ คืออยากให้ตรงรูปภาพมันไม่จางอ่ะครับนี้คือคำสั่งที่ดัดแปลงเล็กน้อยครับไม่รู้ว่าถูกหรือเปล่า

$(function(){

var OverlayObj="<div class='overlay'><div class='alertBox'></div></div>";

$("#btAddOverlay").ready(function(){

$(document.body).prepend(OverlayObj);

$("div.overlay").css({

position:"absolute",  

top:0,

left: 0,   

background:"#000",   

width:"100%", 

height:$(document).height(),   

opacity:.8

});

$("div.alertBox").animate({

marginTop:250

},500).html("<img src='images/iconweb/banner-promotion.jpg'>)");

$("div.alertBox").bind('click',function(){

$("div.overlay").fadeOut("fast");

});

});

});

พอลองปรับค่า opacity:.8 ดูมันนี้ถ้ามากไปขอบด้านนอกก็มืดเกินไปก็เลยไม่รู้ว่าจะปรับตรงไหนครับช่วยชี้แนะทีครับ

จากตัวอย่าง ตามลิ้งค์ด้านล่าง น่าจะมีปัญหา เกี่ยวกับ การแสดงข้อมูลภายใน overlay

https://www.ninenik.com/ประยุกต์การทำ_overlay_เพจ_กับกล่องข้อความ_ด้วย_jQuery-246.html

ให้ปรับตามนี้ดู

CSS Code ตัวอย่าง
 

<style type="text/css">
div.alertBox{
	border:5px solid #33CC00;
	background-color:#F5FEED;
	width:300px;
	text-align:center;
	margin:auto;
	position:fixed;
	z-index:1000;	
}
</style>

HTML Code ตัวอย่าง
 

<input type="button" name="btAddOverlay" id="btAddOverlay" value="ตัวอย่างคลิก" />

jQuery Code ตัวอย่าง
 

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var OverlayObj="<div class='alertBox'></div><div class='overlay'></div>";
	$("#btAddOverlay").click(function(){
		$(document.body).prepend(OverlayObj);
		$("div.overlay").css({
				position:"absolute",  
				top:0,
				left: 0,   
				background:"#000",   
				width:"100%", 
				height:$(document).height(),   
				opacity:.7			
		});		
		$("div.alertBox").css("left",($(window).width()*0.5)-($("div.alertBox").width()*0.5))
		.animate({
			marginTop:150
		},500).html("<img src=https://www.ninenik.com/demo/images/sample_banner01.jpg />");
		$("div.alertBox").bind('click',function(){
			$("div.overlay").fadeOut("fast");
			$(this).fadeOut("fast");
		});		
	});
});
</script>

ตัวอย่างผลลัพธ์
 

ขอบคุณมากครับ แต่ว่า พอ Run ดูใน IE6 มันเพี้ยนครับรูปภาพมันแสดงตรงส่วนหัวสุดแล้วก็คลิกอะไรไม่ได้เลยครับ

รบกวนอีกรอบครับ ขอบคุณครับ

ไม่แน่ใจว่าเป็นที่ bug ของ IE6 หรือป่าว

ให้เปลี่ยนโค้ดในบรรทัดที่ 4 ของ jQuery Code ตัวอย่าง
จาก
 

var OverlayObj="<div class='alertBox'></div><div class='overlay'></div>";   

เป็น
 

var OverlayObj="<div class='alertBox' style='position:absolute;z-index:1000;'></div><div class='overlay'></div>";