Dialog – Page 2 – Justin Cooney

Dialog, HTML, JavaScript, JQuery, Web Development

Setting the Z-Index and Page Position of a JQuery Modal Dialog

2013-03-212013-11-04 Justin Cooney

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.

If you find this article interesting, then take a look at my collection of articles on JQuery and the JQuery Modal Dialog widget.

Continue reading “Setting the Z-Index and Page Position of a JQuery Modal Dialog” →

.Net, ASP.NET, Dialog, HTML, JavaScript, JQuery, Programming, VB.NET, WebForms

Example of Adding a JQuery Modal Dialog Warning on Blur to an ASP.NET Text Box

2013-03-08 Justin Cooney

In this article I will review how to set up a basic JQuery UI Dialog widget to act as a modal alert box that warns the user of a possible problem when they move away from an HTML form field. The traditional JavaScript alert command is functional but doesn’t look very nice but since you can style the markup for the JQuery UI Dialog widget in pretty much any way you like, it makes a lot of sense to use the JQuery dialog instead of a JavaScript alert box.

Although the title of this article specifically mentions ASP.NET, the code is easily applicable to any server-side language or to pure HTML/JavaScript markup. I will show the example using ASP.NET since the controls it renders at the server-side are dynamically named, so this is a perfect opportunity to show how to reference a server-side control with an auto-generated ID in JQuery.

If you do like this article and find it useful, leave a comment below since I always like feedback. Also, you can check out other JQuery articles I have written that may also be of interest to you.

The Desired Behavior

I would like this example page to be similar to most HTML form pages. I’m including some random fields and text, and intend to add validation logic and a warning to one of the form fields. I intend the result to look like the screen-shot at the start of this article. Here are the requirements in point-form:

Basically I want the example page to look like a standard HTML form.
The first form text input field requires a data check so that the value entered by the user shouldn’t be higher than 10.
If the value is higher than 10 then I want a modal JQuery UI warning dialog to appear when the user moves away from the field (on blur).
The dialog should be aligned so that it is flush with the field.

Continue reading “Example of Adding a JQuery Modal Dialog Warning on Blur to an ASP.NET Text Box” →

.Net, Ajax, ASP.NET, Checkbox, Dialog, GridView, JavaScript, JQuery, Programming, VB.NET, Web Development, WebForms

Use a JQuery Modal Form Dialog to Add Rows to a GridView Control

2013-01-04 Justin Cooney

Hooking up a JQuery Form Dialog Widget to an ASP.NET GridView Control

Let’s face it: the stock ASP.NET GridView control has some behaviors and limitations that aren’t exactly optimal. For starters, the lack of a nice way for users to add new rows to the grid is unfortunate. There are, of course, several different work-arounds for this all of which have their pros and cons.

I have been testing out using the JQuery Modal Form dialog widget as an input mechanism for new GridView rows. This has the benefit of not requiring the use of ASP.NET’s heavyweight ViewState and constant back and forth communication with the Web Server. Also, the modal nature of the widget on the Web form is a benefit.

The obvious drawback of using client side code is that the newly added rows are not stored in ViewState and you will need to handle them yourself. This really isn’t a big deal if you consider using Ajax calls to a Web Service rather than a complete form submission.

Category: Dialog