<span style="color: #000000;">#mask { background-color: rgb(0, 0, 0); display:none; opacity: 0.0; /* Safari, Opera */ -moz-opacity:0.0; /* FireFox */ filter: alpha(opacity=0); /* IE */ z-index: 100; height: 100%; width: 100%; background-repeat:repeat; position:fixed; top: 0px; left: 0px; }</span>
可見上邊的樣式可實現半透明的遮罩層,我們只需將一個div標籤放置在我們的body中,如下:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="mask"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="mask"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
在需要遮罩的時候,我們只需將mask變成可見的即可:
<code class="javascript"><span class="pln">$<span class="pun">(<span class="str">"#mask"<span class="pun">).<span class="pln">show<span class="pun">();</span></span></span></span></span></span></code><br /><br />最后,我们将要显示的内容居中显示在我们的遮罩层之上就可以达到我们想要的效果了,位置通过z-index来控制。在遮罩层上的显示内容一般需要居中显示,如果你对css居中还不熟悉,请查水费。