如果 HTML 在里面，jquery ui 对话框就会搞砸

Question

这是我的 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 时，它看起来才困惑。

Answer 1

你的作品，you can test it here .确保您的 HTML 是有效的并且没有任何未关闭/无效的标签，还要确保您的 CSS 没有干扰(这可能是原因)。尝试只不包含您自己的样式表(但仍包含 jQuery UI 样式表)，看看是否能解决问题。