jQuery는 IE6의 마스크 기능을 구현합니다.-JS 튜토리얼-php.cn

jQuery는 IE6의 마스크 기능을 구현합니다.

小云云

풀어 주다： 2018-02-05 15:32:07

원래의

1322명이 탐색했습니다.

이 글은 IE6과 호환되는 마스크 기능을 구현하기 위한 jQuery를 주로 소개하며, jQuery 마스크 레이어의 레이아웃, 스타일, 기능 구현 기술을 자세히 분석하여 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

가장 간편하고 강력한 jQuery 마스크 레이어 효과.

브라우저의 크기가 변경되면 마스크 레이어의 크기도 그에 따라 변경됩니다.

마스크 레이어 위의 대화 상자는 스크롤 변경에 따라 변경될 수 있습니다. 즉, 대화 상자가 브라우저 중앙에 표시됩니다.

HTML code

<p id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >点击这里看 jQuery 遮罩层效果.</a></p>
<p id="fullbg"></p>
<p id="dialog">
<p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >关闭</a></p>
正在加载，请稍后...
</p>

로그인 후 복사

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

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
  $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
  $("#fullbg,#dialog").hide();
}
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
// 浮动对话框
$(document).ready(function() {
  var domThis = $(&#39;#dialog&#39;)[0];
  var wh = $(window).height() / 2;
  $("body").css({
    "background-image": "url(about:blank)",
    "background-attachment": "fixed"
  });
  domThis.style.setExpression(&#39;top&#39;, &#39;eval((document.documentElement).scrollTop + &#39; + wh + &#39;) + "px"&#39;);
});
</script>
<![endif]-->

로그인 후 복사

여기에서 jquery 파일을 가져오는 것을 잊지 마세요 .