通過底層元素

我創建當你點擊頁面上的元素上會出現一個對話框使用上一個div箱子的影子，但我還是能標籤。 div框隨後出現一個巨大的盒子陰影，以防止用戶訪問頁面上的底層（原始）元素。除了它的犯規，用戶仍然可以通過.overlayme格下的項目標籤通過底層元素

我攀登我的代碼下來，writen這個小例子來說明我的意思。如果你點擊通過休息的時候，居然什麼，我想實現的是從點擊第一個按鈕，只能夠選項卡上preveent用戶的第一個按鈕和選項卡中的「最終你」，「會到這裏來」鈕釦。

我的標記是在這裏

<html><head></head><body><input type="button" value="click me first" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
<br/>&nbsp;<br/> 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
<br/>&nbsp;<br/> 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
<br/>&nbsp;<br/> 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
&nbsp; 
<input type="button" value="now tab to me" /> 
<div class="overlayme"> 
<br/>&nbsp;<br/> 
<input type="button" value="eventually you" /> 
&nbsp; 
<input type="button" value="will get here" /></div></body></html>

和我的CSS是這裏

.overlayme input{ background-color:lightgrey; } 
.overlayme { 
max-width: 250px; 
margin: 0 auto; 
margin: 20px; 
padding: 20px; 
border-radius: 20px; 
overflow: hidden; 
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 10000px rgba(0, 0, 0, 0.3); 
position: relative; 
background: white;} 
input{ 
background-color:white;}

因此，在短期基本上..問題是，我仍然可以訪問底層的元素和我他們想被禁用，只能訪問.overlayme div中的項目。

是否可以用CSS來禁用這一水平或但這必須是一個js的事情嗎？例這裏：http://jsfiddle.net/8BPMk/1/

來源

2013-01-04 AttikAttak

什麼你的問題？說得簡單。 – KarSho

問題是，我仍然可以訪問底層元素，我希望它們被禁用，只能訪問.overlayme div上的項目...謝謝（我已重新編輯我的原稿，使其更清晰..謝謝） – AttikAttak

@AttikAttak您覆蓋實際上並沒有掩蓋它，因爲它是一個盒子陰影，不會影響用戶與它進行交互的能力。 – AbstractChaos

使用此： http://jsfiddle.net/gQEUx/

您需要添加定影液DIV絕對定位，100％的寬度和heigth

.fixer { 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    position: absolute; 
}

和

<div class="fixer"> 
    <div class="overlayme"> 
    <br/>&nbsp;<br/> 
    <input type="button" value="eventually you" /> 
    &nbsp; 
    <input type="button" value="will get here" /> 
    </div> 
</div>

這小提琴 - http://jsfiddle.net/gQEUx/1/，感謝個@AbstractChaos

$('.fixer').hide(); 

$('#example').click(function() { 
    $('.fixer').toggle('slow'); 
    if($('.fixer').is(':visible')) { 
    $('input').attr('tabIndex','-1');  
    } 
    else { 
     $('input').attr('tabIndex','1'); 
    } 
});

從這個

如此 - http://www.w3.org/TR/html401/interact/forms.html#tabbing-navigation

這 - http://nemisj.com/focusable/

這 - http://msdn.microsoft.com/en-us/library/ie/ms534654%28v=vs.85%29.aspx

元件可以tabindexed是：

MSDN：

The following elements can have focus and are tab stops by default: a, BODY, button, frame, iframe, img, input, isIndex, object, select, textArea. 

The following elements can have focus by default but are not tab stops. These elements can be set as tab stops by setting the tabIndex property to a positive integer. applet, div, frameSet, span, table, td.

W3C：

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

，我沒有看過第三篇文章，認爲這是已經足夠

編輯：應該做的工作 - http://jsfiddle.net/gQEUx/3/

$('.fixer').hide(); 

$('#example').click(function() { 
    $('.fixer').toggle('slow'); 
    if($('.fixer').is(':visible')) { 
     $('a, AREA, BODY, button, frame, iframe, img, input, isIndex, object, select, textArea, applet, div, frameSet, span, table, td') 
     .attr('tabIndex','-1');  
    } 
    else { 
     $('a, AREA, BODY, button, frame, iframe, img, input, isIndex, object, select, textArea, applet, div, frameSet, span, table, td') 
     .attr('tabIndex','1'); 
    } 

});

來源

2013-01-04 10:56:30 llamerr

這是一個很好的步驟，但也需要禁用從對話框按鈕退回製表符。使用Javascript在不應該可用的按鈕上設置「tabIndex = -1」。 – AbstractChaos

啊，一會兒，錯過了 – llamerr

嘗試這[小提琴]（http://jsfiddle.net/gQEUx/1/），不會讓你選項卡到其他按鈕 – AbstractChaos

通過底層元素

回答

相關問題