Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Preventing tabs in a modal overlay

Posted on 2013-11-11
1
Medium Priority
?
973 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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)

885 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