[英]jQuery modal window closes incorrectly in Internet Explorer
關於jQuery模式窗口,我遇到了一些問題。 我是dba和SQL程序員,我的目標是建立一個查詢,該查詢可動態構建一個HTML,其中包含一個Flash,該Flash鏈接到其中包含另一個Flash的模式窗口。 好了,查詢已經完成並且可以完美地工作了。 但是,我在Internet Explorer上進行了嘗試(並且與firefox和chrome不同),當您想關閉模式窗口時,它將關閉整個瀏覽器窗口(警告消息為“請注意,瀏覽器正在嘗試關閉此選項卡,等等”)。
我使用了已經存在的jquery模態窗口代碼和樣式(我相信兩者都很重要)。 問題是,整個查詢都已完成,如果我更改了整個jquery模態窗口,則必須徹底更改查詢的邏輯(相信我,我已經檢查了)。
因此,我最快的解決方案是糾正使整個事情弄糟的jQuery代碼 (更改sql存儲的proc會花費很多工作)。 這是因為我用作參考的原始示例存在此問題(我只是沒有注意到,由於jQuery假定是所有內容的跨瀏覽器解決方案)。 您會發現它在FF和Chrome上可以完美運行,但在IE上卻無法運行。這是鏈接: http : //www.mediafire.com/?mcz70n870qmjch9
非常感謝!!!
以防萬一我也在這里發布代碼:
/// <reference path="jquery-1.3.2.min-vsdoc.js" />
/************************************************************************************************************
* 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 = '<div class="' + options.imageClassName + '"><img src="' + options.src + '"/></div>';
} else {
contentHTML = '<iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '"></iframe>';
}
options.content = options.content || contentHTML;
if (jQuery('.' + options.modalClassName).length && jQuery('.' + options.overlayClassName).length) {
jQuery('.' + options.modalClassName).html(options.content);
} else {
$overlay = jQuery((_isIE6()) ? '<iframe src="BLOCKED SCRIPT\'<html></html>\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"></iframe><div class="' + options.overlayClassName + '"></div>' : '<div class="' + options.overlayClassName + '"></div>');
$overlay.hide().appendTo(options.parent);
$modal = jQuery('<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;">' + options.content + '</div>');
$modal.hide().appendTo(options.parent);
$close = jQuery('<a class="' + options.closeClassName + '"></a>');
$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 && document.getElementById) {
if (document.compatMode && !window.XMLHttpRequest) {
return true;
}
}
return false;
}
_getOpacity = function (sender) {
$sender = jQuery(sender);
opacity = $sender.css('opacity');
filter = $sender.css('filter');
if (filter.indexOf("opacity=") >= 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);
和樣式:
.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;
}
提前謝謝大家=-)
編輯 :Daniele建議問題可能在此行上:
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
我做了他的建議,結果是:它在IE上仍然根本不起作用(這意味着它仍然要求關閉整個窗口,而不僅僅是模式),並正確地顯示和關閉FF和chrome,但是關閉第一個后,它無法正確顯示另一個。
用closeModal或類似的東西替換模式的close()方法:
$.modal.closeModal = function () {
_modal.closeModal();
}
[...]
this.closeModal = function () {
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}
[...]
$close.click(function () { jQuery.modal().closeModal(); });
$overlay.click(function () { jQuery.modal().closeModal(); });
對我來說有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.