Example sharing of jQuery implementation of masking function compatible with IE6

This article mainly introduces jQuery to implement the mask function that is compatible with IE6, and analyzes the layout, style and function implementation techniques of jQuery mask layer in detail. Friends who need it can refer to it. I hope it can help everyone.

The most streamlined and powerful jQuery mask layer effect.

When the browser changes size, the size of the mask layer will change accordingly.

The dialog box above the mask layer can change with the scroll change, that is, the dialog box is displayed in the center of the browser.

HTML Code

##

点击这里看 jQuery 遮罩层效果.


关闭
正在加载，请稍后...

CSS Code

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
}
#main {
  height: 1800px;
  padding-top: 90px;
  text-align: center;
}
#fullbg {
  background-color: Gray;
  left: 0px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  z-index: 3;
  filter: alpha(opacity=50); /* IE6 */
  -moz-opacity: 0.5; /* Mozilla */
  -khtml-opacity: 0.5; /* Safari */
}
#dialog {
  background-color: #FFF;
  border: 1px solid #888;
  display: none;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  padding: 12px;
  position: fixed !important; /* 浮动对话框 */
  position: absolute;
  top: 50%;
  width: 200px;
  z-index: 5;
}
#dialog p {
  margin: 0 0 12px;
}
#dialog p.close {
  text-align: right;
}

jquery code

JS code example to implement the mask effect when the mouse is placed on the image

How to prevent the mask layer Example of page scrolling

What is the js special effect mask layer

The above is the detailed content of Example sharing of jQuery implementation of masking function compatible with IE6. For more information, please follow other related articles on the PHP Chinese website!