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% 宽度和高度的固定器 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 的元素是：

微博：

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-04T10:56:30.690 回答