2011-12-07 3 views
-1

IE에서 jQuery 효과에 문제가 있습니다. 그러나 Chrome, Firefox 및 Safari에서 제대로 작동합니다.IE에서 jQuery 팝업 효과가 작동하지 않지만 다른 브라우저에서 작동합니다.

포럼에서 검색했지만 문제를 찾을 수 없습니다.

웹 사이트는 http://www.voces.org.es

IE에서 작동하지 않는 기능입니다 : 팝업에 대한

  1. 함수 :

    $(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; 
    }); 
    

    });

나는이 첫 번째 웹 프로젝트를 통해 내 길을 걸어 왔지만 실제로이 문제를 해결할 수는 없습니다. 여기 도움을 주시면 감사하겠습니다.

+1

_ "작동하지 않음"_은 전체적으로 부적절한 문제 설명입니다. – Sparky

+0

Jquery가로드되고 있지만 함수가 팝업을 트리거하지 않습니다. 문제를 더 잘 설명하고 싶지만 문제가 무엇인지 알 수는 없습니다 –

+0

처음에는 문제를 재현하기위한 단계 또는 IE 버전을 포함하지 않았습니다. – Sparky

답변

0

1) 계속 진행하기 전에 HTML Validation errors을 모두 고칩니다. 이탈하는 태그와 관련된 콘솔 오류가 발생합니다. //<![CDATA[ & //]]> 태그

둘러싼 <body> 내의 자바 스크립트가 귀하의 JS 코드를 구문 분석 HTML 유효성 검사를 중지합니다.

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

     // your jQuery/JavaScript 

    //]]> 
</script> 

2) 최신 버전의 jQuery를 사용하고 있는지 확인하십시오. 1 년 이상 된 1.4.1 버전을 사용 중입니다. 이제 1.7까지 올라가고 많은 변화가있었습니다.

3) 견적 OP 의견 : "IE7 또는 IE8에서는 작동하지 않지만 IE6에서는 시도하지 않았습니다." - 가능한 경우 IE6을 잊어 버리고 IE9에 집중하십시오.

4) 여전히 작동하지 않는 경우 jalary 라이트 박스 플러그인 (IE와 작동하는 것으로 입증 됨)을 사용하여 모달 팝업을 시도하십시오. FancyBoxprettyPhoto은 확실한 선택입니다.

+0

시작하기 좋은 곳 같아요. 즉시 제안을 시도하고 결과에 계속 게시 해 드리겠습니다. 감사!!! –

+0

그냥 // 모든 것을 작동 시켰습니다. Sparky672 감사합니다! –

관련 문제