Solved

Preventing tabs in a modal overlay

Posted on 2013-11-11
1
523 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
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now