Not sure what's going on with the title bar, I'll need to look into
that.
Using the down arrow and causing a change is due to IE's handling of
the change event, it's not related to dialogs.
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.
Not sure why the dialog isn't showing for you in FF2, I'll have to
look into that as well.
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
-~----------~----~----~----~------~----~------~--~---
