แสดงพื้นหลัง สีดำจางๆ
<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>
ตัวอย่าง