JQuery UI 사용자 정의 모달 대화 상자

Question

JQuery UI 1.7.2를 사용하여 모달 팝업 효과를 만들려고합니다. 기본적으로 일반 오류 위젯이 차단되어 나머지 페이지가 팝업됩니다. 직장에서 IE6을 사용하고 있으며 업그레이드 할 방법이 없습니다. 현재이 문제를 해결하려고합니다.

<div id="errorPopup" style="display: none;"> 
    <div class="ui-overlay"> 
    <div class="ui-widget-overlay"></div> 
    <div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 300px; position: absolute; top: 1em; left: 1em;"></div> 
    </div> 
    <div style="position: absolute; left: 35em; top: 30em; padding: 10px;" class="ui-state-error ui-widget ui-widget-content ui-corner-all"> 
    <div class="ui-state-error ui-dialog-content ui-widget-content" style="background: none; border: 0;"> 
     <p> 
     <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
     <strong>Opps:</strong> That wasn't meant to happen. 
     </p> 
    </div> 
    </div> 
</div> 

JQuery UI 클래스의 사용에 유의하십시오. 이것은 효과가 없으며 이유를 알지 못합니다. JQuery UI로 옮겨야하는 이유가 나를 위해 자신의 물건을 다루는 것이기 때문에 효과를 얻으려는 자신의 CSS와 js를 쓰는 것을 피하려고합니다.

모든 의견 환영합니다!

Answer 1

jQuery UI가 작동하지 않는 이유는 무엇입니까?

다음 플러그인을 사용해보세요. 데모 페이지를보고 어울리는 지 확인하십시오. http://malsup.com/jquery/block/#

Answer 2

대화 형 프리젠 테이션을 수동으로 수정하지 않으려 고 생각합니다. javascript를 사용하여 대화 상자를 실행하는 것이 좋을 것입니다. jQuery는 IE6에서 문제를 해결하기 위해 재미있는 일을 할 것입니다.

다음은 간단한 버전 :

<div id="dialog" title="Dialog Title" style="display:none;"></div> 
<script> 
    $(document).ready(function(){ 

     $('#dialog').dialog({ modal: true, 
       bgiframe: true, 
       open: function(){} 
      });  
     }); 
</script> 

수동으로하고 싶은 경우가있을 것입니다 뭔가 같은 :

<div class="ui-widget-overlay" style="width: 1263px; height: 2253px; z-index: 1001;"></div> 
<div style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px none; height: auto; width: 330px; top: 169px; left: 463px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-dialog" unselectable="on" style="-moz-user-select: none;">Make an enquiry</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a></div><div style="height: 242px; min-height: 117px; width: auto;" id="dialog" class="ui-dialog-content ui-widget-content">ERROR STUFF</div> 

당신이 매우 지저분 볼 수 있듯이!

아, 그리고 한 가지 더 : 당신이 포함되어 있는지 확인합니다 'jquery.bgiframe.min.js'와 'bgiframe: true'는 IE6