Méthode d'implémentation de la couche de masque jQuery

Cet article présente principalement en détail des exemples de calques de masque jQuery, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde

1.1 Translucidité de l'arrière-plan Le style de calque de masque <.>

nécessite un fond noir (ou autre) et doit être défini sur un positionnement absolu. Voici le style CSS utilisé dans le projet :

.

/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

1.2 Implémentation jQuery du masque

/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo第一个参数为速度，第二个为透明度
  // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

1.3 Boîte d'invite

Le but de le masque doit rendre impossible l'utilisation du contenu et mettre en surbrillance la boîte d'invite. La boîte d'invite peut être créée en vous référant à ce qui précède. L'index z peut être supérieur au calque du masque. Le principal problème est de savoir comment contrôler que la boîte d'invite soit centrée dans le navigateur.

/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  
  $(id).css({left: l+&#39;px&#39;, top: t+&#39;px&#39;});
}

//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

Recommandations associées :

Exemple de la fonction de jQuery permettant d'afficher automatiquement le calque de masque lors de l'ouverture d'une page Web ou d'un clic pour faire apparaître jusqu'au calque de masque

Exemple de la façon d'empêcher la page de défiler après le calque de masque

Qu'est-ce qu'un calque de masque à effets spéciaux js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!