By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,536 Members | 2,165 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,536 IT Pros & Developers. It's quick & easy.

Hidden popup blocking out form fields

P: 5
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!

Jul 27 '07 #1
Share this Question
Share on Google+
3 Replies

Expert 100+
P: 1,351
please post the part(s) of your code that u are have issues with and then we can better assist u.

thank you.
Jul 27 '07 #2

P: 5
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:
Expand|Select|Wrap|Line Numbers
  1. initialize: function(popup, activateEvent){
  2.     this.popup = popup;
  3.     this.bodyClickEventListener = this._onBodyClick.bindAsEventListener(this);
  4.     var activator = this._findActivator();//finds the element directly before the popup and makes that the activator
  5.     this.activatorId =;
  6.     this.popup.activatorId =;
  7.     activator.popup = this;
  9.     if(activateEvent){
  10.         if(activator.href){
  11.             activator.removeAttribute("href");
  12.    = utils.isIE() ? "hand" : "pointer";
  13.     }
  15.     Event.observe(activator, activateEvent, function(event){
  16.         activator.popup.toggle();
  17.     });
  19.     this.popupElement.parentNode.removeChild(this.popupElement);
  20.     document.body.appendChild(this.popupElement);
  22. = "block";
  23.     this.popupHeight = Element.getHeight(this.popupElement);
  24. = "none";
  25. },
  26. ....
  27. toggle:function(){
  28.     var activator = $(this.activatorId);
  29.     if(!activator){
  30.         return;
  31.     }
  32.     var effectTarget = this.popupElement;
  33.     if(!effectTarget){
  34.         return;
  35.     }
  36.     var popup = this;
  38.     if(Element.getStyle(effectTarget, "display") != "block"){
  39.         var leftAdjustment = 0;
  40.         ...a bunch of browser related checks to determine popup offset, including
  41.         computing em's to pixels (reasonable conversion) etc.,
  43.         Position.clone(activator, effectTarget, {
  44.             setLeft: true,
  45.             setTop: true,
  46.             setWidth: false,
  47.             setHeight: false,
  48.             offsetLeft: leftAdjustment,
  49.             offsetTop: Element.getHeight(activator)
  50.        });
  52.         new Effect.BlindDown(effectTarget, {duration: 0.2, afterFinish: function(){
  53.             this._setOverflow();
  54.             this.showIFrame();
  55.             Event.observe(document.body, "click", popup.bodyClickEventListener);
  56.         }.bind(this)});
  57.         $(effectTarget).style.zIndex="1000";
  58.     }
  59.     else{
  60.         this._hideIFrame();
  61.         new Effect.BlindUp(effectTarget, {duration: 0.2, afterFinish: function(){
  62.             Event.stopObserving(document.body, "click" popup.bodyClickEventListener)}.bind(this)});
  63.         $(effectTarget).style.zIndex = "-1000";
  64. }
the popup div
Expand|Select|Wrap|Line Numbers
  1. <div id="aPopup" class="popup">
  2.     <input type="text" id="save" size="25" maxlength="25" /><br />
  3.     <span style="float:left;"><a href="#" id="cancel">cancel</a></span>
  4.     <span style="float:right;"><a href="#" id="save">save</a></span>
  5. </div>
event handling on click and save href's
Expand|Select|Wrap|Line Numbers
  1. Event.observe($('save'), 'click', function(){
  2.     ...make an ajax call to save the "thing"
  3.     $('aPopup').toggle();
  4. }
  6. Event.observe($('cancel'), 'click', function(){
  7.     $('aPopup').toggle();
  8. }
  9. ...some previous initialization code strips the href attribute off of the
  10. <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.,
Jul 27 '07 #3

P: 5
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.
Jul 27 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.