Solved

Preventing tabs in a modal overlay

Posted on 2013-11-11
1
564 Views
Last Modified: 2013-11-12
I'm using a Telerik control which sets a modal overlay across a page while a modal dialog is showing.

Here is the div for the overlay:

<div unselectable="on" class="TelerikModalOverlay" style="position: absolute; left: 0px; top: 0px; z-index: 7999; background-color: rgb(170, 170, 170); opacity: 0.5; width: 1147px; height: 969px;"></div>

Open in new window


The trouble is it is still possible to tab onto some of the elements on the page below - is there some extra attribute I can set on this div that will prevent the user being able to tab off the modal dialog and onto the page below?
0
Comment
Question by:purplesoup
1 Comment
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39640907
You can handle the elements focus outside the popup.
If an element gets the focus and it's outside the popup, put the focus on the first element of the popup.

In the following demo I simulate this with 2 areas.
Area two behaves like your popup, and the button toggles the area visibility.
While area 2 is visible you won't be able to focus outside its controls.
http://jsfiddle.net/GF7Ba/4/
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question