Home/ Questions/Q 9084993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T21:08:16+00:00

I have created a dialog box that appears when you click on an element

  • 0

I have created a dialog box that appears when you click on an element on the page. The div box then appears with a huge box shadow to prevent the user from accessing the underlying (orginal) elements on the page. Except its doesnt, the user can still tab through the items under the .overlayme div

I have scaled my code down and writen this little example to demonstrate what i mean.
If you click on the first button and tab through the rest, when actually what i am trying to achieve is preveent the user from clicking on the first button and only being able to tab on the “eventually you”, “will get here” buttons.

My mark up is here

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

and my css is here

.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;}

So basically in short .. The problem is that i can still access the underlying elements and i want them to be disabled and only be able to access the items on the .overlayme div.

Is it possible to disable this lower level with css or does this have to be a js thing?
Example here: http://jsfiddle.net/8BPMk/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use this:
    http://jsfiddle.net/gQEUx/

    you need to add fixer div with absolute positioning and 100% width and heigth

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

    and

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

    and this fiddle – http://jsfiddle.net/gQEUx/1/, thanks to @AbstractChaos

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

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

    so from this – http://www.w3.org/TR/html401/interact/forms.html#tabbing-navigation

    and this – http://nemisj.com/focusable/

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

    elements that can be tabindexed are:

    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.

    and i haven’t read third article, think that would be enough already

    EDIT: should do the job – 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');
    }

});
    • 0