jQuery modal window closes incorrectly in Internet Explorer
<p>I'm having some problems regarding a jQuery modal window. I'm a dba and SQL programmer and my goal is to build up a query which dynamically builds an HTML which contains a flash which links to a modal window that has another flash in it. Well the query is done and works flawlessly. However, I tried it on Internet Explorer and (unlike firefox and chrome) when you want to close the modal window it closes the <strong>whole</strong> browser window (with a warning message that says "beware, the browser's trying to close this tab etc").</p>

<p>I used an already existing jquery modal window code and styling (I believe that both matter). The problem is, that the whole query is done and if I change the whole jquery modal window, I'll have to change the query's logic, and drastically (believe me, I've checked).</p>

<p>So, my fastest solution would be to correct <strong>the jQuery code</strong> that is messing up the whole close thing (changing the sql stored proc would take a <em>LOT</em> of work). This is because the original example I used as a reference had this problem (I just didn't notice, due to jQuery supposively being a cross-browser solution for everything). You will see that it works flawlessly on FF and Chrome but not in IE 
Here's the link: <a href="http://www.mediafire.com/?mcz70n870qmjch9" rel="nofollow">http://www.mediafire.com/?mcz70n870qmjch9</a></p>

<p>Thanks a lot!!!</p>

<p>Just in case I'm posting the code here as well:</p>

<pre><code>/// &lt;reference path="jquery-1.3.2.min-vsdoc.js" /&gt;

/************************************************************************************************************
* SIMPLE MODAL v 2.0
* © 2009 FISHBOWL MEDIA LLC
* http://fishbowlmedia.com
***********************************************************************************************************/

(function ($) {

    /**********************************
    * CUSTOMIZE THE DEFAULT SETTINGS
    * Ex: 
    * var _settings = {
    *   id: 'modal',
    *   src: function(sender){
    *       return jQuery(sender).attr('href');
    *   },
    *   width: 800,
    *   height: 600
    * }
    **********************************/
    var _settings = {
        width: 800, // Use this value if not set in CSS or HTML
        height: 600, // Use this value if not set in CSS or HTML
        overlayOpacity: .85, // Use this value if not set in CSS or HTML
        id: 'modal',
        src: function (sender) {
            return jQuery(sender).attr('href');
        },
        fadeInSpeed: 0,
        fadeOutSpeed: 0
    }

    /**********************************
    * DO NOT CUSTOMIZE BELOW THIS LINE
    **********************************/
    $.modal = function (options) {
        return _modal(this, options);
    }
    $.modal.open = function () {
        _modal.open();
    }
    $.modal.close = function () {
        _modal.close();
    }
    $.fn.modal = function (options) {
        return _modal(this, options);
    }
    _modal = function (sender, params) {
        this.options = {
            parent: null,
            overlayOpacity: null,
            id: null,
            content: null,
            width: null,
            height: null,
            modalClassName: null,
            imageClassName: null,
            closeClassName: null,
            overlayClassName: null,
            src: null
        }
        this.options = $.extend({}, options, _defaults);
        this.options = $.extend({}, options, _settings);
        this.options = $.extend({}, options, params);
        this.close = function () {
            jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
        }
        this.open = function () {
            if (typeof options.src == 'function') {
                options.src = options.src(sender)
            } else {
                options.src = options.src || _defaults.src(sender);
            }

            var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
            var contentHTML = '';
            if (fileExt.test(options.src)) {
                contentHTML = '&lt;div class="' + options.imageClassName + '"&gt;&lt;img src="' + options.src + '"/&gt;&lt;/div&gt;';

            } else {
                contentHTML = '&lt;iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '"&gt;&amp;lt/iframe&gt;';
            }
            options.content = options.content || contentHTML;

            if (jQuery('.' + options.modalClassName).length &amp;&amp; jQuery('.' + options.overlayClassName).length) {
                jQuery('.' + options.modalClassName).html(options.content);
            } else {
                $overlay = jQuery((_isIE6()) ? '&lt;iframe src="BLOCKED SCRIPT\'&amp;lt;html&amp;gt;&amp;lt;/html&amp;gt;\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"&gt;&lt;/iframe&gt;&lt;div class="' + options.overlayClassName + '"&gt;&lt;/div&gt;' : '&lt;div class="' + options.overlayClassName + '"&gt;&lt;/div&gt;');
                $overlay.hide().appendTo(options.parent);

                $modal = jQuery('&lt;div id="' + options.id + '" class="' + options.modalClassName + '" style="width:' + options.width + 'px; height:' + options.height + 'px; margin-top:-' + (options.height / 2) + 'px; margin-left:-' + (options.width / 2) + 'px;"&gt;' + options.content + '&lt;/div&gt;');
                $modal.hide().appendTo(options.parent);

                $close = jQuery('&lt;a class="' + options.closeClassName + '"&gt;&lt;/a&gt;');
                $close.appendTo($modal);

                var overlayOpacity = _getOpacity($overlay.not('iframe')) || options.overlayOpacity;
                $overlay.fadeTo(0, 0).show().not('iframe').fadeTo(_settings.fadeInSpeed, overlayOpacity);
                $modal.fadeIn(_settings.fadeInSpeed);

                $close.click(function () { jQuery.modal().close(); });
                $overlay.click(function () { jQuery.modal().close(); });
            }
        }
        return this;
    }
    _isIE6 = function () {
        if (document.all &amp;&amp; document.getElementById) {
            if (document.compatMode &amp;&amp; !window.XMLHttpRequest) {
                return true;
            }
        }
        return false;
    }
    _getOpacity = function (sender) {
        $sender = jQuery(sender);
        opacity = $sender.css('opacity');
        filter = $sender.css('filter');

        if (filter.indexOf("opacity=") &gt;= 0) {
            return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
        }
        else if (opacity != '') {
            return opacity;
        }
        return '';
    }
    _defaults = {
        parent: 'body',
        overlayOpacity: 85,
        id: 'modal',
        content: null,
        width: 800,
        height: 600,
        modalClassName: 'modal-window',
        imageClassName: 'modal-image',
        closeClassName: 'close-window',
        overlayClassName: 'modal-overlay',
        src: function (sender) {
            return jQuery(sender).attr('href');
        }
    }
})(jQuery);
</code></pre>

<p>And the style:</p>

<pre><code>.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #131313;
    opacity: .85;
    filter: alpha(opacity=85);
    z-index: 101;
}
.modal-window {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    z-index: 102;
    background: #fff;
    border: solid 8px #000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.close-window {
    position: absolute;
    width: 47px;
    height: 47px;
    right: -23px;
    top: -23px;
    background: transparent url(../images/close-button.png) no-repeat scroll right top;
    text-indent: -99999px;
    overflow: hidden;
    cursor: pointer;
}
</code></pre>

<p>Thanks a ton in advance everyone =-)</p>

<hr>

<p><strong>EDIT</strong>: Daniele suggested that the problem might be on this line:</p>

<pre><code>jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
</code></pre>

<p>I did what he suggested and the result was this: It still doesn't work at all on IE (meaning that it still asks to close the whole window and not just the modal), and correctly shows and closes a first modal in FF and chrome, but after closing the first one its not able to correctly show another one.</p>

<hr>
