2011-11-11 5 views
0

모달 창 SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) 버전을 구현하는 데 문제가 있습니다. 그것은 Firefox와 같은 브라우저에서 올바르게 작동하지만 IE에서 제대로 작동하지 않습니다. 배경 요소는 클릭 가능하고 기능적이며 모달 창에서 원하는 효과가 아닙니다. 왜 Internet Explorer는 simplemodal (Internet Explorer 이외)에서 올바르게 작동하지 않으며 수정 프로그램을 어떻게 세울 수 있습니까?Simplemodal (모달) 사용 - IE - 모달 디스플레이에서는 제대로 작동하지 않지만 배경 요소는 클릭 할 수 있습니다. 그래도 firefox에서 작동합니다.

이 내가 사용하고 스크립트는 다음과 같습니다

<body> 
    <div id="Content"> 
    <a href="http://www.google.com">google</a> 
    <input type="button" value="click me" onclick="javascript:alert('should not work');">Hello World 
    <input type="button" value="open modal" onclick="javascript:$.modal('<div><h1>Simple Modal</h1></div>');"> 
    </div> 
</body> 

어떤 도움 주셔서 대단히 감사합니다 : 여기
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="jquery.simplemodal.1.4.1.min.js"></script> 

은 HTML과 코드입니다.

업데이트 내 처지의 질문 요약을 편집했다. 나는 이것을 Firefox에서 테스트했음을 강조하고 싶습니다. 내 관심사는 IE에서 제대로 작동하지 않는다는 것입니다. 지금까지 내가 할 수있는 내가 여기에 조금 내 깊이에서 틀림 해요

// bind the overlay click to the close function, if enabled 
if (s.o.modal && s.o.close && s.o.overlayClose) { 
    s.d.overlay.bind('click.simplemodal', function (e) { 
    e.preventDefault(); 
    s.close(); 
    }); 
} 

:하지만,

답변

0

데모를 다운로드하여 골격 부분으로 해부했습니다. css 파일 중 하나에서이 행이 모든 배경 요소를 사용하지 못하게합니다.

#simplemodal-overlay {background-color:#000; cursor:wait;} 

이것은 단순 모드의 내부 div이며 'wait'로 설정 커서가 대답입니다. IE의 버전도 차이를 만드는 것 같지 않았습니다.

1

플러그인을 간단히 살펴 데, 나는 이벤트 버블 링이 제대로 처리되지 않은 추측 것 말하자면, 오버레이는 실제로 방지되어야하는 "기본"동작을 갖고 있지 않습니다. 예방할 필요가있는 것은 이벤트 전파입니다.

시도 플러그인 자체의 비 축소 된 버전에서 preventDefault 라인 위에이 추가 (그냥, 너무로 preventDefault를 유지할 수 아무런 해가 없다) :

물론
e.stopPropagation(); 

, 당신이 포함되는이 이 스크립트는 현재 포함되어 있지 않은 스크립트입니다. 도움이되는지 궁금 할 것입니다. 실제로 "테스트"하지 않고 "대답"을 제시하는 것에 사과하지만, 내가 원하는 것보다 테스트를 설정하는 것이 더 많은 시간을 필요로합니다. ;-)

단점 : 제대로 작동하지 않는 경우, 적절한 위치를 찾아 좁히는 것이 어렵습니다. 선택한 도구를 사용하여 모든 것을 스스로 다시 쉽게 할 수 있습니다.

[부록 :] e.stopPropagation(); 당신이 제대로 입력 태그를 닫고 제거해야합니다 오래된 학교를 가서 귀하의 예제 코드에서

return false; 

s.close();

+0

도움과 의견을 보내 주셔서 대단히 감사합니다. 불행히도, 모달은 IE에서 작동하지 않기 때문에 제 질문과 요약의 공식에 심각한 오류가있었습니다. 그것은 Firefox에서 잘 테스트하지만 IE는 관심사입니다. – user717236

+1

제안 된 변경 사항을 시도하고 IE가 여전히 문제인지 확인할 수 있습니다. ;-) –

1

을 추가 할 수 있습니다 작동하지 않는 경우 두 번째 입력에 콜론이 추가됩니다. 그것은 어쩌면 당신은 적어도 오버레이, 간단한 모달 CSS 스타일을 추가해야 작동하는 경우 또한 위해 확인 :

#simplemodal-overlay {background-color:#000; cursor:wait;} 

또한 오류에 대한 개발자 콘솔을 확인합니다. 어쨌든 코드를 시도했지만 "click me"버튼이 비활성화되어 있습니다.

+0

도움 주셔서 대단히 감사합니다. 내가 질문을 수정함에 따라 명확하지 않은 점에 대해 사과드립니다. 그것은 Firefox에서 작동하지만 IE에서는 작동하지 않습니다. – user717236

+1

IE 버전도 지정해야합니다. –