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

我希望在操作時禁用所有頁面元素。類似於JQuery UI中的模態功能。使用jquery禁用所有具有模式功能的頁面元素

就像一個ajax行動..我希望顯示一個通知，並在同一時間啓用模式功能。並且在請求之後，需要重新啓用頁面元素。

核心jQuery中有沒有任何選項可用於該插件或任何插件？

2010-09-09 viMaL

你應該考慮，如果真的是你想要的行爲問題。這樣做會接近將ajax請求設置爲同步，最終導致非常不好的用戶體驗。 – jAndy 2010-09-09 08:01:47

阻止用戶界面http://malsup.com/jquery/block/ – 2010-09-09 08:19:35

頁面元素未被禁用 - 這樣做會很乏味 - 而是在所有其他頁面元素之上覆蓋半透明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，如果這是你需要的唯一的東西。

來源

2010-09-09 08:01:11

如果按TAB鍵，實際上不能正常工作。不斷按下標籤，最終可以訪問鏈接，文本框和其他UI元素「位於」模式下方。 – peter 2012-04-30 13:19:08

@PeterCPWong這取決於你想禁用UI的方式。你總是可以繪製一個循環，實際上禁用所有的頁面元素，或者隱藏模式對話框下面的所有元素，但是我會說禁用'tab'按鈕（就像Block UI所做的那樣）不利於可訪問性 - 你會陷在你的頁面上的鍵盤用戶，無法切換到瀏覽器UI – 2012-05-02 12:20:48

我認爲最好的方法是禁用TAB「凍結」UI元素，並允許用戶按ESC鍵關閉模式和「解凍「用戶界面。考慮一種模式形式，其中用戶使用TAB在表單中前進。如果「凍結的」用戶界面仍然可以通過TAB訪問，那麼它確實打破了您的網絡應用程序的可用性。 – peter 2012-06-11 09:46:39

一個簡單的方法來實現這一目標是定義一個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是body元素的第一個孩子。刪除類以禁用模式模式。

您的通知應該有一個z-index高於dark-class的z-index。所有需要禁用的項目都必須具有較低的Z-index。

來源

2010-09-09 07:58:47 kgiannakakis

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

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

來源

2012-10-15 10:39:44

嘗試添加「指針事件：無;」樣式到身體。要刪除它使用指針事件：自動;

這裏 https://css-tricks.com/almanac/properties/p/pointer-events/ 更多信息雖然有可能與早期的瀏覽器不支持它

來源

2017-06-03 16:18:32

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

回答

相關問題