jQuery的彈出式窗口效果不工作在IE中，但在其他瀏覽器上工作

-1

我遇到了IE中的jQuery效果問題。但是，它們可以在Chrome，Firefox和Safari中正常使用。jQuery的彈出式窗口效果不工作在IE中，但在其他瀏覽器上工作

我搜索的論壇，但我不能發現問題。

網站是http://www.voces.org.es

不工作在IE的功能是：

爲彈出窗口函數：

$(document).ready(function() { 
//When you click on a link with class of poplight and the href starts with a # 

$('a.poplight[href^=#]').click(function() { 
    var popID = $(this).attr('rel'); //Get Popup Name 
    var popURL = $(this).attr('href'); //Get Popup href to define size 

    //Pull Query & Variables from href URL 
    var query= popURL.split('?'); 
    var dim= query[1].split('&'); 
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value 

    //Fade in the Popup and add close button 
    $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="http://voces.org.es/wp-content/themes/voces/img/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>'); 

    //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css 
    var popMargTop = ($('#' + popID).height() + 80)/2; 
    var popMargLeft = ($('#' + popID).width() + 80)/2; 

    //Apply Margin to Popup 
    $('#' + popID).css({ 
     'margin-top' : -popMargTop, 
     'margin-left' : -popMargLeft 
    }); 

    //Fade in Background 
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false; 
}); 

//Close Popups and Fade Layer 
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... 
    $('#fade , .popup_block').fadeOut(function() { 
     $('#fade, a.close').remove(); //fade them both out 
    }); 
    return false; 
});

}）;

我打過我的這種方式，我的第一個Web項目，但我真的不能解決這個問題。我會很感激這裏的幫助。

來源

2011-12-07 Pablo Giralt

_「不起作用」_是完全不合適的問題描述。 – Sparky

似乎Jquery正在加載，但函數不會觸發彈出窗口。想更好地解釋問題，但我真的不知道問題是什麼 –

對於初學者，您沒有包括重現問題或IE版本的步驟。 – Sparky

1）在進一步討論之前，解決所有HTML Validation errors。我收到了一些與流浪標籤相關的控制檯錯誤。

將<body>中的任何JavaScript與//<![CDATA[ & //]]>環繞的HTML標記解析您的JS代碼以停止HTML驗證。

<script type="text/javascript" language="JavaScript"> 
    //<![CDATA[ 

     // your jQuery/JavaScript 

    //]]> 
</script>

2）確保你使用的是最新版本的jQuery。您正在使用已有一年多的版本1.4.1。現在已經達到了1.7，並且發生了很大的變化。

3）報價OP評論：「不以IE7或IE8的工作，但還沒有嘗試過對IE6」 - 如果可能的話，忘掉IE6並專注於IE9。

4）如果仍然無法正常工作，拉昇模式彈出，而不是一個jQuery燈箱插件（證明與IE瀏覽器的工作）。 FancyBox和prettyPhoto是可靠的選擇。

來源

2011-12-07 17:12:20 Sparky

太棒了，聽起來像是一個很好的起點。我會立即開始嘗試您的建議，並讓您公佈結果。謝謝！！！ –

只要放入// <！[CDATA [//]]>使所有的工作。感謝Sparky672！ –

jQuery的彈出式窗口效果不工作在IE中，但在其他瀏覽器上工作

回答

相關問題