I am running ito a few problems using DIV tags as popups in my web app so I could use some advise on to best design practice.
1. Do I try and use generic popup holders or create a unique DIV tag holder for each different form, list, etc I want to display. Example I have about 20 different lists I display as popups in differnt areas of the app. Do I really need a separate div tag for each.
2. Do I set each popup with its own popups to avoid stack issues or have general popups rooted in the parent jsp.
3. Do I control the z-index at the page level(using CSS) or at the CSS level where I define the DIV tag?
1) I don't know what you mean by "generic holder", or even holder. A <div> is a way to create a block of elements to be dealt with as a unit, so I think the answer is "individual" even if I'm not quite sure what the question is.
2) Again, not clear what the question is, but I suspect the answer is to just keep track of the appropriate z-indexes.
3) Page level vs CSS level? Does not compute. What are you meaning?
1) A lot of times I pull the DIV from the server on an ajax request that contains the information I need, and I turn that div into a "dialog" (I think is the appropriate term here). So I don't really need to keep track of anything. If things are static, that's a different story.
2) Dialogs on top of dialogs, ewe, messy. I'd avoid this as much as possible. The most I ever do is a dialog that might have a confirmation dialog display for a save/delete/whatever. More than that, again, ewe!
3) Yea, don't understand this.
I'd avoid a lot of this confusion by using something like jQuery UI's Dialog. Or something of equivalent.
And.... if it's "dialogs" you are after, the jQuery UI Dialog widget is hard to beat.
Joined: Nov 16, 2004
I will try and explain a little better. I am not the best at explanations so please bear with me.
I have my main form with a header, left hand navigation and right hand content. These are DIV tags.
So I jquery.load the content by selecting a navigation option. This content is a page that is laid out with several DIV Tags( its own header, navigation, body, etc, and hidden DIV tags used to display blocks of spcific data or dynamic lists, this is what I was refering to as a holder(a DIV tag used to display a form in a specific location). It could be an input form that populates the content area or may be a table of editable records.
Lets choose the latter. On of the fields is a link that displays vendor data. I use a DIV tag to display this using jquery.load. I call this a popup. within this displayed form there is a text box that contains the vendor code. When I click this box I use DIV tag to display the list of approved vendors using jquery.load for the user to choose from