jQuery implements the mask function of IE6

This article mainly introduces jQuery to implement the mask function that is compatible with IE6. It 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 as the scroll changes, 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

jQuery mask layer implementation method

The above is the detailed content of jQuery implements the mask function of IE6. For more information, please follow other related articles on the PHP Chinese website!