0

ページ上の要素をクリックすると表示されるダイアログ ボックスを作成しました。div ボックスは、ユーザーがページの基になる (元の) 要素にアクセスできないように、巨大なボックスの影と共に表示されます。そうでない場合を除いて、ユーザーは .overlayme div の下の項目をタブで移動できます

コードを縮小して、この小さな例を書いて、私が何を意味するかを示しました。最初のボタンをクリックして残りをタブで移動すると、実際に私が達成しようとしているのは、ユーザーが最初のボタンをクリックするのを防ぎ、「最終的にはあなた」、「ここに来る」ボタンだけをタブで移動できるようにすることです.

私のマークアップはこちら

<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/

4

1 に答える 1

3

これを使用してください: http://jsfiddle.net/gQEUx/

絶対位置と 100% の幅と高さで fixer div を追加する必要があります

.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

tabindex できる要素は次のとおりです。

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.

3番目の記事はまだ読んでいませんが、これで十分だと思います

EDIT：仕事をする必要があります - 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-04T10:56:30.690 に答える