On Sep 25, 8:21 am, Scott González <[EMAIL PROTECTED]> wrote:
> Not sure what's going on with the title bar, I'll need to look into
> that.
Thanks. Like I said, when I commented out show and hide, the title
bar started working.
>
> Using the down arrow and causing a change is due to IE's handling of
> the change event, it's not related to dialogs.
Yeah, I forgot about that. Stupid IE.
>
> You need to use the bgiframe option to prevent selects from showing
> through the overlay. You'll also need the bgiframe plugin for this to
> work.
Thanks, I'll check it out.
>
> Not sure why the dialog isn't showing for you in FF2, I'll have to
> look into that as well.
For more info, check my earlier post titled "Problem in v1.6?".
Here's the URL:
http://groups.google.com/group/jquery-ui/browse_thread/thread/d5c607b3859f1b9c?hl=en
Note, I have not tested this in FF3 yet. I'm still hanging on to good
ol' FF2.
>
> On Sep 24, 1:03 pm, TimW66 <[EMAIL PROTECTED]> wrote:
>
> > After reading an earlier post, it occurred to me I hadn't yet tested
> > my modal dialog on IE. Upon testing, I discovered several problems.
> > Let me explain what I am doing:
>
> > We will have up to 7 select boxes and text boxes. We want those to
> > show on the page, but we also want them to show in a modal dialog box,
> > one dialog for each input. Here is my code:
> > jQuery(document).ready(function() {
> > // Create our hidden area for our cloned fields.
> > $("body").append("<div id='hiddenArea' style='display: none'>");
> > displayField("firstField");});
>
> > function displayField(fieldId) {
> > var fieldSel;
> > var clonedId;
> > var clonedSel;
>
> > var $fieldLabel;
> > var headerText;
> > var $fieldDiv;
> > var $clonedField;
>
> > // Since the ID we got doesn't have a "#" in front, let's add one.
> > fieldSel = "#" + fieldId;
>
> > // We clone the field so we can use it in the lightbox, leaving our
> > original alone.
> > $clonedField = $(fieldSel).clone(true);
>
> > // Change the ID of the cloned field.
> > clonedId = $(fieldSel).attr('id') + "_cloned";
> > $clonedField.attr('id', clonedId);
>
> > // As we did for our original field ID, add a "#" to the beginning
> > of
> > our cloned ID.
> > clonedSel = "#" + clonedId;
>
> > // Append our cloned field to a holding area that's hidden so we can
> > use it.
> > $clonedField.appendTo('#hiddenArea');
>
> > // Get the label for our field. If there isn't one, use the Id for
> > our header text.
> > $fieldLabel = $("label[for='" + fieldId + "']");
> > if( $fieldLabel ) {
> > headerText = $fieldLabel.text();
> > } else {
> > headerText = fieldId;
> > }
>
> > // Get our object here so we can re-use it below. Less jQuery
> > calls,
> > hopefully.
> > $fieldDiv = $(clonedSel);
>
> > // Display the lightbox.
> > $fieldDiv.dialog({
> > open: function(ev, data) {
> > $(this).trigger('focus');
> > },
> > resizable: false,
> > draggable: false,
> > position: "center",
> > title: headerText,
> > show: "fade",
> > hide: "fade",
> > modal: true,
> > overlay: {
> > opacity: 0.7,
> > background: "black"
> > }
> > });
>
> > $fieldDiv.change(function() {
> > // Get the value they entered and put it back in the
> > original field.
> > $(fieldSel).val($fieldDiv.val());
> > // Destroy the dialog box.
> > $fieldDiv.dialog("destroy");
> > // Disable the original field.
> > $(fieldSel).attr('disabled', 'disabled');
> > // Display the next field.
> > displayField(getNextField(fieldId));
> > })
>
> > }
>
> > And an example field:
> > <form action="">
> > <label for="firstField">Select Type</label>
> > <select id="firstField" class="dialog">
> > <option selected value="">--- Type ---</option>
> > <option value="1">Type 1</option>
> > <option value="2">Type 2</option>
> > <option value="3">Type 3</option>
> > </select>
>
> > There are several problems with this in IE6. First, if I use show and
> > hide, I don't always get the dialog's title bar. Second, if I use
> > open to focus the element, as soon as down arrow is pressed on a
> > select box, it triggers the change and goes to the next dialog.
> > Third, the original select boxes are not blocked by the modal window
> > (though the text boxes are). This is using a customized 1.5.2, so
> > only the pieces required for dialog are present. On a side note, when
> > using 1.6rc2 and using show and hide, I don't see any dialog in
> > Firefox 2.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
