In this article I will go through a technique that you can use when working with a modal popup that lets you store form information from your popup to later use with your main Web form.
In earlier articles I have covered some of the general functions and benefits of using the ShowModalDialog function that I will expand on this article. If you have questions about some of the code I’ve used in this article, then please take a look at my earlier articles that might help explain some of the concepts:
The latest news coming from the world of jQuery is the official release of jQuery 2.0.
The new jQuery 2.x library is a significantly smaller file size than the jQuery 1.x series of libraries, but the 2.0 library does not support versions of Internet Explorer prior to version 9.
For the foreseeable future, the makers of jQuery plan to run two separate lines of the jQuery library:
- The jQuery 1.x library will continue to be developed for years to come and will support older browser versions.
- On the other hand, the jQuery 2.x library will support newer browsers and will offer both a smaller file size, and likely modern features that older browsers can not support.
If you are working with JQuery tabs and want to extend the functionality of your tabs beyond the basics, then it’s good to know how to handle the JQuery tabs click event.
In this article I will:
- Review how to add event handling to the JQuery tabs when a tab is clicked
- I will show how to load an iFrame contained in a tab when the tab is selected.
If you like this article, please have a look here for further useful articles about JQuery.
Structure of the Example
The JQuery modal dialog widget can be a useful tool on most Web pages. If you take a look at its structure in a tool such as FireBug you will see that it consists of a div that grays out the web page’s background, and another div that sits on top and that presents the modal dialog.
If you are adding absolute positioning and z-index markup to your Web page, then you will want to look a little deeper into the properties of your modal dialog widgets and how they interact with other elements on your Web page.
When an area of your page has a higher z-index than your modal dialog does, then the dialog will not be modal for that area, and may even be hidden by the area entirely. For example, if you have a text field on your form that is wrapped in an element with a z-index that is higher than that of your modal dialog, then your modal dialog will not gray out the text field. Even worse, the text field will remain editable which is certainly not desirable behavior.