Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

JQuery mask layer_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:03:57

Original

1361 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：

jquery Mask

source：php.cn

Previous article：CF#248DIV2：A. Kitahara Haruki's Gift_html/css_WEB-ITnose Next article：com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column '' in 'field list'_html/css_WEB-ITnose

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