Hidden popup blocking out form fields

[cmo]

Well I hope I this isn't too nebulous of a problem. The problem I currently have is this:

I have a button in a form that opens up a javascript/css poup that has an input field and two ahref links for ok and cancel, both of which call the popup's toggle() method (same thing that is called from the button). The form that this button is in has fields that can be added or removed by the user.

Everything works great in firefox and netscape, but, as usual, ie6 is the sticky wicket. In ie6, if the popup is opened and then the cancel or ok link is clicked, the popup closes. That's works. Now, after closing the popup, if more form fields are added by the user, there is a ghost impression of where the popup used to be that basically blocks out that portion of the form fields. The popup itself isn't visible but a block of that size the color of the background of the form is (and, like I said, it cuts off portions of the input/select fields). The only way to get rid of this is by refreshing the page.

The interesting bit is that, if the popup is closed by pressing on the button that launches it, this issue does not appear. It only happens if the popup is closed by clicking on the cancel/ok links on the popup itself (bear in mind that these call the same toggle() method that the button launching the popup calls).

I've played with setting the z-index of the popup to 1000 when displayed and -1000 when hidden but that doesn't appear to accomplish anything.

I wish I could post the code but this is on an intranet site without internet access :-( Hopefully someone might have a clue based on my lengthy and long winded description!

Thanks!

[epots9]

please post the part(s) of your code that u are have issues with and then we can better assist u.

thank you.

[cmo]

I'll see what I can do but as I'm hand transcribing this there are no guarantees that it'll be bug free ;-D
relevant sections of popup creation/toggling code:

initialize: function(popup, activateEvent){
    this.popup = popup;
    this.bodyClickEventListener = this._onBodyClick.bindAsEventListener(this);
    var activator = this._findActivator();//finds the element directly before the popup and makes that the activator
    this.activatorId = activator.id;
    this.popup.activatorId = activator.id;
    activator.popup = this;

    if(activateEvent){
        if(activator.href){
            activator.removeAttribute("href");
            activator.style.cursor = utils.isIE() ? "hand" : "pointer";
    }
    
    Event.observe(activator, activateEvent, function(event){
        activator.popup.toggle();
    });

    this.popupElement.parentNode.removeChild(this.popupElement);
    document.body.appendChild(this.popupElement);

    this.popupElement.style.display = "block";
    this.popupHeight = Element.getHeight(this.popupElement);
    this.popupElement.style.display = "none";
},
....
toggle:function(){
    var activator = $(this.activatorId);
    if(!activator){
        return;
    }
    var effectTarget = this.popupElement;
    if(!effectTarget){
        return;
    }
    var popup = this;

    if(Element.getStyle(effectTarget, "display") != "block"){
        var leftAdjustment = 0;
        ...a bunch of browser related checks to determine popup offset, including
        computing em's to pixels (reasonable conversion) etc.,

        Position.clone(activator, effectTarget, {
            setLeft: true,
            setTop: true,
            setWidth: false,
            setHeight: false,
            offsetLeft: leftAdjustment,
            offsetTop: Element.getHeight(activator)
       });
       
        new Effect.BlindDown(effectTarget, {duration: 0.2, afterFinish: function(){
            this._setOverflow();
            this.showIFrame();
            Event.observe(document.body, "click", popup.bodyClickEventListener);
        }.bind(this)});
        $(effectTarget).style.zIndex="1000";
    }
    else{
        this._hideIFrame();
        new Effect.BlindUp(effectTarget, {duration: 0.2, afterFinish: function(){
            Event.stopObserving(document.body, "click" popup.bodyClickEventListener)}.bind(this)});
        $(effectTarget).style.zIndex = "-1000";
}

the popup div

<div id="aPopup" class="popup">
    <input type="text" id="save" size="25" maxlength="25" /><br />
    <span style="float:left;"><a href="#" id="cancel">cancel</a></span>
    <span style="float:right;"><a href="#" id="save">save</a></span>
</div>

event handling on click and save href's

Event.observe($('save'), 'click', function(){
    ...make an ajax call to save the "thing"
    $('aPopup').toggle();
}

Event.observe($('cancel'), 'click', function(){
    $('aPopup').toggle();
}
...some previous initialization code strips the href attribute off of the
<a href's> and sets the pointer to the appropriate hand/pointer.

What happens is that, when the activator of the popup is clicked, the popup shows up or goes away just fine. When the form that contains the popup activator expands or contracts (dynamically added dom input fields/selects) everything is fine.

However, when the cancel or save links are clicked, the popup is hidden, but
if the form grows there is a "cut out" of the form fields in the same size as the popup that just displays the background of the form "over" the form fields. The popup still functions fine at this point wtrt showing/hiding and etc.,

[cmo]

well found out what the issue was. In ie, the popup was being created with an iframe to get around the select drop down issue. For whatever reason, calling the toggle method from the cancel and save onClick events was not properly removing the iframe. I had to manually get a reference to the iframe through the dom and then explicitly remove it in the save/cancel event handlers.