使用jquery禁用具有模態功能的所有頁面元素

Question

我想在動作時禁用所有頁面元素。 就像JQuery UI中的模態功能一樣。

就像在ajax動作上一樣..我希望顯示一個通知，同時啟用模態功能。 並且在請求之后，需要重新啟用頁面元素。

核心jquery中是否有針對該插件或任何插件的可用選項？

Answer 1

頁面元素未被禁用 - 這樣做會非常繁瑣 - 而是將半透明div疊加在所有其他頁面元素的頂部。 要做到這一點，你可能會做類似的事情

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

而CSS：

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

然后，一旦操作完成，您只需將其刪除如下：

overlay.remove();

如果這是您需要的唯一內容，則無需包含jQuery UI。

Answer 2

實現此目的的一種簡單方法是定義一個這樣的css類：

.dark-class
{
   background-color: #F0F0F0;
   filter:alpha(opacity=50); /* IE */
   opacity: 0.5; /* Safari, Opera */
   -moz-opacity:0.50; /* FireFox */
   z-index: 20;
   background-repeat:no-repeat;
   background-position:center;
   width: 100%;
   height: 100%;
   position:absolute;
   top: 0px;
   left: 0px;
}

使用jQuery將此類添加到空div中，該div是body元素的第一個子元素。 刪除類以禁用模態模式。

您的通知的z-index應高於暗級的z-index。 需要禁用的所有項目必須具有較低的z-index。

Answer 3

我喜歡江的想法，但你不需要帶有以下疊加樣式表的圖像。

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}

Answer 4

嘗試添加“pointer-events：none;”樣式 對身體。 要刪除它，請使用pointer-events：auto;

更多信息，請訪問https://css-tricks.com/almanac/properties/p/pointer-events/雖然早期瀏覽器可能存在問題但不支持它