2010-10-13 22 views
1

因此,這裏是我的HTML:jQuery UI的對話框搞砸了,如果HTML裏面

<a href="#/" class="next openModalBox lessOpacity">Posunúť sa dopredu</a> 
<div id="modalBoxContent"> 
    <p style="font-size: .8em; text-align: center;"> 
    Úspešne ste absolvovali študijnú časť školenia. 
     Pre ukončenie školenia je potrebné úspešne absolvovať <a href="/index/index" class="accessible-link">záverečný test</a>. 
</p> 
</div> 

而我的JS:

$(document).ready(function() { 

    // vytvorenie kurzu 
    $('a.openModalBox').click(function(e) { 
     var href = $(this).attr('href'); 
     if ('#/' == href) { 
      e.preventDefault(); 
      $('#modalBoxContent').dialog({ 
       modal: true, 
       resizable: false, 
       title: 'Upozornenie', 
       zIndex: 1, 
       show: 'fast', 
       hide: 'slow', 
       width: 600, 
       height: 90, 
       position: 'middle' 
      }).width(600); 
     } 
    }); 

}); 

問題是對話窗口被搞砸了。這是它的HTML:

<div style="width: 1920px; height: 862px; z-index: 2;" class="ui-widget-overlay"></div> 
<div aria-labelledby="ui-dialog-title-modalBoxContent" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="display: block; z-index: 3; outline: 0px none; height: auto; width: 600px; top: 381px; left: 655px;"> 
<div style="-moz-user-select: none;" unselectable="on" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
<span style="-moz-user-select: none;" unselectable="on" id="ui-dialog-title-modalBoxContent" class="ui-dialog-title">Upozornenie</span> 
<a style="-moz-user-select: none;" unselectable="on" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#"><span style="-moz-user-select: none;" unselectable="on" class="ui-icon ui-icon-closethick">close</span></a> 
</div> 
<div class="ui-dialog-content ui-widget-content" style="display: block; width: 600px; min-height: 0px; height: 36px;" id="modalBoxContent"> 
        <p style="font-size: 0.8em; text-align: center;"> 
         Úspešne ste absolvovali študijnú časť školenia. 
Pre ukončenie školenia je potrebné úspešne absolvovať <a href="/index/index" class="accessible-link">záverečný test</a>. 
        </p> 

</div></div> 

它看起來像這樣:

http://i51.tinypic.com/2ai4oro.jpg

當只是一個文本的#modalBoxContent內,對話窗口看起來它應該是。只有當有一些HTML時,它看起來很亂。

回答

2

你有什麼作品,you can test it here。確保你的HTML是有效的,並且沒有任何未封閉/無效的標籤,也要確保你的CSS不會干擾(這可能是原因)。試試而不是包括你自己的樣式表(但仍包括jQuery UI版本),看看它是否能解決問題。