Home > Web Front-end > HTML Tutorial > JQuery mask layer_html/css_WEB-ITnose

JQuery mask layer_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:03:57
Original
1396 people have browsed it

1. The style is set as follows:

<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>
Copy after login

Where: opacity:0.5; is suitable for IE, -moz-opacit :0.5; Applicable to Firefox; you only need to add them, and you can use them in both Firefox and IE.

2. Specify the height and width of the layer.

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

3. Add the following code to , and then you can see the effect:

<div id="mask" class="mask"></div><a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template