Problems with IE

I'm using Control.Modal to show a popup modal window. Here the code:

function doPopup() { var m = new Control.Modal($('popup_activate'),{ opacity: 0.2, position: 'absolute', width: 400, height: 300, beforeClose: function() { var popup = Control.Modal.current; return (popup.options.opacity == 1); } }); m.open(); } function popupClose() { var popup = Control.Modal.current; popup.options.opacity = 1; popup.close(); }

I'm using control_modal-1.1.4.js and prototype-1.5.1_rc2.js (I've also tested with prototype-1.5.0.js with the same resutl).

The link is a Struts call that returns a page that is the popup itself. It works on Firefox, but it doesn't on IE, and I don't know why. What am I doing wrong? Can anybody help me?

Thanks in advance.

Posted April 4th, 2007 at 10:18am by judokaine

Can't do to much without seeing the source code, and I don't have time to do any debugging of other people's code, but upgrade to the latest Control.Modal, and don't use prototype 1.5.1! Loaded with problems right now. Stick to 1.5. If your problem persists, and you can narrow it down to a problem with the Control.Modal library itself let me know.

Posted April 4th, 2007 at 12:50pm by ryan

BTW, you can call Control.Modal.close() anywhere. You don't need to get a reference to any particular modal window.

Posted April 4th, 2007 at 12:50pm by ryan

I have the same problem, also using struts, works fine in FF, blows up in IE, right here (around line 186):

zIndex: this.options.zIndex

Of the following block, commenting it out didn't help:

if(!this.options.hover){ Control.Modal.overlay.setStyle({ zIndex: this.options.zIndex }); Control.Modal.overlay.setOpacity(this.options.opacity); }

Posted April 4th, 2007 at 7:52pm by paulio

BTW, the JS msg:

"Object doesn't support this property or method"

Posted April 4th, 2007 at 11:42pm by paulio

I think we must have missed this limitation:

You can have a modal window pre opened on the page if is local / on page (not an AJAX, iframe or image modal), ...

It works in FF though, any workarounds? It's the pre-opening that's failing when trying to set style on the iframe in IE.

Posted April 5th, 2007 at 7:42am by paulio

At the end of the day, dynamic creation of iframes seems to be buggy. The only way I got it reliably working cross browser was with an onclick event triggered by a real click, with a single modal window link per page. Every browser but safari handles multiple modals fine (safari just uses the first one you specify over and over), but IE is very stubborn about creating an iframe with JS under many conditions.

This might be a security issue. I'm not really sure. Use AJAX if you can! The reason I added in iframe support at all was to submit a form that uploaded an image.

Posted April 5th, 2007 at 10:57am by ryan

Thanks Ryan, I've had to switch back to using subModal.js, still a great lib though, I'm using it for a hoverbox still.

Now I'm using lightbox, control and subModal, ...the madness! Will get rid of lightbox.

Posted April 5th, 2007 at 7:58pm by paulio

First let me say thanks to Ryan for deriving this cool util, it has saved a fair amount of time. Next, we were running into same problem as stated above with the setStyle function. Turns out it is a problem in prototype's 1.50 library, and after upgrading to 1.50 rc1 it worked fine.

Quick question to anyone who maybe able to answer, we are using dwr ajax topopulate some callbacks and (only in ie6/7 -- of course!) though it works, the modal overlay doesn't show over the dropdownlists. I suspect it is zindex, but has anyone else had problems with control.modal and (ajax populated) dropdownlists, or dropdownlists period? Cheers.

Posted April 23rd, 2007 at 1:07pm by jason5538

I've had problem with dropdown list - IE was throwing an error (see this post http://livepipe.net/community/comments.php?DiscussionID=36) but this issue was fixed in the last build

Posted April 23rd, 2007 at 2:11pm by kangax

I'm also having the same issue with that line in IE7. I'm using the most current versions of control.modal and prototype.

zIndex: this.options.zIndex

Here's my code:

Event.observe(window,'load',function(){
        m2 = new Control.Modal($('window_trigger2'),{
            containerClassName: 'warn',
            overlayClassName: 'warn', 
            opacity: 0.5,
            width: 400, 
            height: 150 
        });
    m2.open();
    });

Posted May 22nd, 2007 at 5:52pm by thrashr888