title: jQuery modal window closes incorrectly in Internet Explorer
body: <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>