การแสดงสีดำจางๆ ?????
<style type="text/css">
#overlay {
position:absolute; /* กำหนดตำแหน่งให้เ ต็มจอภาพ */
margin:auto;
top:0;
left:0;
width:100%;
height:100%;
z-index:9998;
background-color:black; /* สีพื้นของ overlay */
filter:alpha(opacity="70"); /* กำหนดความโปร่งใสของ overlay (0-100) */
MozOpacity:0.7; /* กำหนดความโปร่งใสของ overlay (0-1) cross browser */
KhtmlOpacity:0.7;
opacity:0.7;
visibility:hidden; /* ซ่อนไว้ก่อน เพื่อให้เรียกใช้จาก Javascript */
}
</style>
<div id="overlay" onclick="this.style.visibility='hidden'"></div>
<input type="button" onclick="showOverlay()" value="แสดง Overlay" />
<script type="text/javascript" language="Javascript">
function showOverlay() {
var body = document.getElementsByTagName('body')[0]
var overlay = document.getElementById('overlay')
overlay.style.height=body.offsetHeight+"px"
overlay.style.width=body.offsetWidth+"px"
overlay.style.visibility="visible"
}
</script>
//------------------
<div style='height:1800px;'>//ชุดนี้เป็นโค็ดที่เพิ่มเข้ามาทดสอบ
<li><p><ul>1111</ul><ul>2222</ul></p></li>
</div>
ผมคัดลองโค็ดชุดนี้ไป พอรันกับ firefox ใช้งานได้ดี ขนาดความสูงเต็มจอ
แต่พอรันกับ ie7 กลับได้ความสูงแค่ ครึ่งเดียว ไม่เต็มจอ
ต้องแก้ไขจุดไหนบ้างครับ
#overlay {
position:absolute; /* กำหนดตำแหน่งให้เ ต็มจอภาพ */
margin:auto;
top:0;
left:0;
width:100%;
height:100%;
z-index:9998;
background-color:black; /* สีพื้นของ overlay */
filter:alpha(opacity="70"); /* กำหนดความโปร่งใสของ overlay (0-100) */
MozOpacity:0.7; /* กำหนดความโปร่งใสของ overlay (0-1) cross browser */
KhtmlOpacity:0.7;
opacity:0.7;
visibility:hidden; /* ซ่อนไว้ก่อน เพื่อให้เรียกใช้จาก Javascript */
}
</style>
<div id="overlay" onclick="this.style.visibility='hidden'"></div>
<input type="button" onclick="showOverlay()" value="แสดง Overlay" />
<script type="text/javascript" language="Javascript">
function showOverlay() {
var body = document.getElementsByTagName('body')[0]
var overlay = document.getElementById('overlay')
overlay.style.height=body.offsetHeight+"px"
overlay.style.width=body.offsetWidth+"px"
overlay.style.visibility="visible"
}
</script>
//------------------
<div style='height:1800px;'>//ชุดนี้เป็นโค็ดที่เพิ่มเข้ามาทดสอบ
<li><p><ul>1111</ul><ul>2222</ul></p></li>
</div>
ผมคัดลองโค็ดชุดนี้ไป พอรันกับ firefox ใช้งานได้ดี ขนาดความสูงเต็มจอ
แต่พอรันกับ ie7 กลับได้ความสูงแค่ ครึ่งเดียว ไม่เต็มจอ
ต้องแก้ไขจุดไหนบ้างครับ
body{
width:100%;
height: 100%;
}
เท่าที่จำได้ดูเหมือนโค้ดนี้จะมีปัญหาเล็กน้อยครับ แต่ก็ไม่ได้ใช้นานแล้ว เลยอาจตอบตรงๆไม่ได้ ดูเหมือนมันจะมีปัญหาหาก หน้าเพจไม่ได้ทำงานเต็มจอหรือไงเนี่ยครับ
โค้ดที่ได้รับการแก้ไขแล้วมีใช้อยู่ใน GAJAX ครับ ให้ลองดูที่ GModal