Heim > Web-Frontend > HTML-Tutorial > JQuery 遮罩层_html/css_WEB-ITnose

JQuery 遮罩层_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:03:57
Original
1378 Leute haben es durchsucht

1.样式如下设置:

 

<style type="text/css">    .mask {              position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;            z-index: 1002; left: 0px;            opacity:0.5; -moz-opacity:0.5;        }</style>
Nach dem Login kopieren

其中: opacity:0.5;适用于IE, -moz-opacit:0.5;适用于火狐;你只需要都加上,便可以火狐和IE下都可以使用。

2.指定层的高度、和宽度。

<script type="text/javascript">    //兼容火狐、IE8    function showMask(){        $("#mask").css("height",$(document).height());        $("#mask").css("width",$(document).width());        $("#mask").show();    }</script>
Nach dem Login kopieren

3.在中加入如下代码,然后就可以看效果了:

<div id="mask" class="mask"></div><a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage