Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Implementation of CSS mask layer_html/css_WEB-ITnose

Implementation of CSS mask layer_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:02

Original

1917 people have browsed it

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，html代码：

Java代码

《挂号须知》

The above code consists of three parts. popDiv represents the pop-up layer, which pops up when the "Registration Instructions" link is clicked.
And bg represents the mask layer, that is, when the pop-up layer is displayed, the content behind the layer is covered. The last one refers to the displayed link.
The CSS classes of these three parts are as follows:

Css code

.mydiv {
#FCF4EA; Or>
There is a very important part, that The problem is that the bg mask layer needs to cover the full screen. This thing is difficult to solve, so we use JQuery to solve it, that is, set the size of the bg when the page is initialized:

Js code

$(function(){

$(".bg").width($(document).width());

$ ('.bg').height($(document).height());

After having the above foundation, only You need to set the data and mask layer to be displayed through ajax callback when clicking the link, as follows:

function showDiv (orgId){ bg").show();

$("#popDiv").fadeIn(1000);

});

} closeDiv(){

This process is actually relatively simple, but I don’t often do page stuff, so I can’t remember much about CSS. I just knew a little bit and wrote it down.

Related labels：

CSS遮罩层的实现

source：php.cn

Previous article：How does ASP send activation emails after registration? _html/css_WEB-ITnose Next article：How to rotate each word in a div rotated 90 degrees back_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