編輯數據時阻擋UI元素的最佳方式

我想就如何在編輯過程中最好地處理「模糊化」非關鍵UI元素提出一些建議。爲了解釋這個更清楚我自己製作的示意圖：編輯數據時阻擋UI元素的最佳方式

enter image description here

我們的Web應用程序使用JQuery的對話窗口來查看/編輯數據。我們的大部分數據都歸類在可拖動窗口內部的JQuery手風琴中。

當用戶點擊手風琴標題的編輯按鈕時，我們希望屏蔽除了正在編輯的手風琴內容之外的頁面上的所有內容。

嘗試過像'Block UI'這樣的插件（http://www.malsup.com/jquery/block/）我們一直無法做到這一點。使用'Block UI'，我們只能'模糊'整個用戶界面並顯示模態消息...

很明顯，我們正在尋找的功能可能無法通過這種方式實現。

基本上，在用戶正在編輯給定DIV中的表格細節時，除非用戶保存或放棄更改，否則所有其他外部元素都不能「可點擊」。（理想情況下，右邊的窗口）

有沒有關於實現此類功能的最佳方式的建議？

來源

2013-04-26 Dal

最簡單的方法是隻有一個元素（半 - 透明背景）覆蓋整個頁面（固定位置，或移動設備的絕對位置） - 並且要將其中一個部分放置在最上面，同時將其定位（相對）併爲其提供更高的z -指數。 – CBroe 2013-04-26 14:31:01

我認爲你正在尋找的想法是這樣的：http://jquerytools.org/demos/toolbox/expose/form.html但只是在jQuery中做，或者你想使用jquerytools庫 – Andrew 2013-04-26 14:33:23

jQuery的工具暴露應該做你需要的東西：http://jquerytools.github.io/demos/toolbox/expose/index.html

在download page，您可以選擇只公開，這是0.6 KB gzip壓縮。

來源

2013-04-26 14:29:01 Mooseman

似乎是什麼OP尋找 – 2013-04-26 14:32:41

由於其簡單性，我首選此解決方案，謝謝！ – Dal 2013-04-29 13:00:06

「jQuery Tools公開」鏈接脫機 – 2014-08-18 23:28:13

您可以按預期覆蓋div，然後使用相對定位和z-index訪問要激活的元素並將它們移動到前面。

假設你想訪問只有button元素：

$('<div />').css({ 
    background: '#000000', 
    opacity: 0.5, 
    position: 'absolute', 
    width: '100%', 
    height: '100%', 
    top: 0, 
    left: 0, 
    zIndex: '10' 
}).appendTo('body'); 
$('button').css({ 
    position: 'relative', 
    zIndex: 20 
});

Here's an example fiddle.

來源

2013-04-26 14:55:57 LeonardChallis

注意：這篇文章假設你想使用塊UI，或者，你會至少從它的主要好處防止所有用戶交互的能力（包括鍵盤導航）;你說過你的問題的方式（以及其他人似乎正在回答的方式）是你想防止別人在其他地方點擊點擊。這是一個重要的區別！

您可以使用阻止用戶界面來阻止整個頁面，但您希望用戶使用的部分除外，然後取消屏蔽您希望用戶關注的部分。

void function blockRest(){ 
    function getRest(target){ 
     var andParent = target.add(target.parents()); 

     return andParent.siblings(); 
    } 

    $.fn.blockRest = function(){ 
     getRest(this).block(); 

     return this; 
    } 

    $.fn.unblockRest = function(){ 
     getRest(this).unblock(); 

     return this; 
    } 
}();

這種方式，採取了一切，除了在計算器上的帖子編輯器就變成了：

$('#post-editor').blockRest();

請記住，你需要使用unblockRest在事後收拾它。

如果你不喜歡的造型BlockUI應用，你可以用這個對象作爲參數被nerf它的調用block和unblock：

{message:null,overlayCSS:{opacity:0,cursor:'default'}}

來源

2013-04-26 16:26:00 Barney

編輯數據時阻擋UI元素的最佳方式

回答

相關問題