Диалоговое окно JQuery имеет огромный заголовок

Я использую:
JQuery 1.6.1
JQuery UI 1.8.13
Chrome 12.0.742.100
IE 7.0.5
FF 4

Я создал диалоговое окно пользовательского интерфейса JQuery, и оно выглядело нормально во всех трех. введите здесь описание изображения

Я пошел и сделал еще несколько страниц, но ничего не сделал с диалогами или css (о которых я знаю, новичок в JQuery и CSS). Затем вчера каждый диалог на всех моих страницах стал выглядеть так (только в FF и chrome. IE все еще выглядит нормально) ...

введите здесь описание изображения
Заголовок внезапно стал огромным, и я понятия не имею, почему. Я копался в css, используя firebug, но не могу заставить его вернуться.
У кого-нибудь есть хорошие идеи?

HTML, CSS и JQuery довольно стандартны. Я использую одну из готовых тем с сайта JQuery-UI.

<div id="Div1" title="Connections">
    <a href="CM.aspx?mode=0" class="jquery-ui-button dialog-link-button">Add</a>
    <a href="CMSearch.aspx" class="jquery-ui-button dialog-link-button">Search/Edit</a>
</div>
/* --------------------------------------------------------------------- */
/* disable the x in the upper-right corner of jquery-ui dialogs */
.ui-dialog-titlebar-close 
{
    display: none;
}
/* center the user-defined buttons within jquery-ui dialogs */
.dialog-link-button
{
    float: none;
    width:250px;
    display: block;
    margin: 10px auto;
}
/* make the buttons in the jquery-ui dialog button pane on the bottom center aligned */
.ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
{    
    float: none;
    display: block;
    margin: 10px auto;
}
/* --------------------------------------------------------------------- */
var options = {
    autoOpen: false,
    modal: true,
    open: function(event, ui) {
        /* blur the buttons so they aren't auto selected */
        $(".dialog-link-button").blur();
    },
    resizable: false,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
};
$('#connectionsModal').dialog(options);
/* --------------------------------------------------------------------- */

person Veaviticus    schedule 23.06.2011    source источник
comment
Можем ли мы получить ссылку, чтобы увидеть это вживую?   -  person Levi Morrison    schedule 23.06.2011
comment
Есть ли простой способ сделать это? Я разрабатываю это как часть приложения для своей работы, и все это делается в .NET с локального веб-сервера Visual Studio в интрасети. Не уверен, как я могу получить его в любом месте.   -  person Veaviticus    schedule 23.06.2011
comment
Хм. . . Вы могли бы сохранить всю отображаемую страницу и все ее зависимости, заархивировать их и отправить нам ссылку на это? В большинстве браузеров есть возможность сохранить всю веб-страницу.   -  person Levi Morrison    schedule 23.06.2011
comment
Вот ссылка на действительно минимальный пример этого. Дело в том, что когда я вычищал все ненужное, если я вынул список повторителей на странице, проблема исчезла. Так что я предполагаю, что это связано с этим, но это всегда было и никогда не вызывало проблем до вчерашнего дня. filesonic.com/file/1296183794   -  person Veaviticus    schedule 23.06.2011
comment
Ссылка Mediafire на случай, если другая не работает или занимает слишком много времени. mediafire.com/?u2wc3lc4upc66uu   -  person Veaviticus    schedule 23.06.2011


Ответы (2)


Ответ: проблема в вашем поплавке повторителя.

Простое убийство .repeater{float:left;} решает проблему. Тем не менее, я полагаю, вам, вероятно, нужно, чтобы эта штука плавала.

Исправьте это, обернув весь ваш контент внутри div с class='ui-helper-clearfix'. Таким образом, когда jQuery создает модальное окно, оно прикрепляется к телу, а поплавок очищается нашим новым div.

Я признаю, что это самый странный эффект обтекания, который я когда-либо видел.

Измененный test.htm:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>
    </title><link rel="stylesheet" type="text/css" href="./test_files/main.css" media="screen">
    <link rel="stylesheet" type="text/css" href="./test_files/jquery-ui-1.8.10.custom.css" media="screen">
    <script type="text/javascript" src="./test_files/additional-methods.min.js"></script>
    <script type="text/javascript" src="./test_files/jquery.min.js"></script>
        <script type="text/javascript" src="./test_files/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./test_files/Default.css" media="screen">
    <script type="text/javascript">

    </script>


    <script type="text/javascript">
        $(document).ready(function() { /* set up the dialogs */
        /* options for the dialogs */
        var options = {
            autoOpen: false,
            modal: true,
            open: function(event, ui) { /* blur the buttons so they aren't auto selected */
                $(".dialog-link-button").blur();
                /* justify (center) the text in the buttons. Must be done programmaticaly because each text can have a different width */
                $('.dialog-link-button .ui-button-text').each(function() {
                    justify(this);
                });
            },
            resizable: false,
            buttons: {
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        }; /* actual dialogs */
        $('#connectionsModal').dialog(options); /* set up the buttons */
        $('.jquery-ui-button').button(); /* blur the buttons so they don't get stuck in focus mode (not sure why they are stupid, just are) */
        $('.jquery-ui-button').click(function() {
            $(this).blur();
        });

    });

    /* function to justify *this* within its parent */

    function justify(e) {
        var parentWidth = $(e).parent().width();
        var thisWidth = $(e).width();
        var padLeft = (parentWidth / 2 - thisWidth / 2) + 'px';
        $(e).css('padding-left', padLeft);
    }
    </script>

    <style type="text/css">
        .jstree ul, .jstree li {
        display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
        .jstree li { display:block; min-height:18px; line-height:18px; white-space:nowrap; margin-left:18px; }
        .jstree-rtl li { margin-left:0; margin-right:18px; }
        .jstree > ul > li { margin-left:0px; }
        .jstree-rtl > ul > li { margin-right:0px; }
        .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
        .jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } 
        .jstree a:focus { outline: none; }
        .jstree a > ins { height:16px; width:16px; }
        .jstree a > .jstree-icon { margin-right:3px; }
        .jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; }
        li.jstree-open > ul { display:block; }
        li.jstree-closed > ul { display:none; }
    </style>
    <style type="text/css">
        #vakata-dragged { display:block; margin:0 0 0 0; padding:4px 4px 4px 24px; position:absolute; top:-2000px; line-height:16px; z-index:10000; }
    </style>
    <style type="text/css">#vakata-dragged ins { display:block; text-decoration:none; width:16px; height:16px; margin:0 0 0 0; padding:0; position:absolute; top:4px; left:4px; } 
        #vakata-dragged .jstree-ok { background:green; }
        #vakata-dragged .jstree-invalid { background:red; }
        #jstree-marker { padding:0; margin:0; line-height:12px; font-size:1px; overflow:hidden; height:12px; width:8px; position:absolute; top:-30px; z-index:10000; background-repeat:no-repeat; display:none; background-color:silver; }
    </style>
    <style type="text/css">#vakata-contextmenu { display:none; position:absolute; margin:0; padding:0; min-width:180px; background:#ebebeb; border:1px solid silver; z-index:10000; *width:180px; } #vakata-contextmenu ul { min-width:180px; *width:180px; } 
        #vakata-contextmenu ul, #vakata-contextmenu li { margin:0; padding:0; list-style-type:none; display:block; }
        #vakata-contextmenu li { line-height:20px; min-height:20px; position:relative; padding:0px; }
        #vakata-contextmenu li a { padding:1px 6px; line-height:17px; display:block; text-decoration:none; margin:1px 1px 0 1px; }
        #vakata-contextmenu li ins { float:left; width:16px; height:16px; text-decoration:none; margin-right:2px; }
        #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background:gray; color:white; } #vakata-contextmenu li ul { display:none; position:absolute; top:-2px; left:100%; background:#ebebeb; border:1px solid gray; }
        #vakata-contextmenu .right { right:100%; left:auto; }
        #vakata-contextmenu .bottom { bottom:-1px; top:auto; }
        #vakata-contextmenu li.vakata-separator { min-height:0; height:1px; line-height:1px; font-size:1px; overflow:hidden; margin:0 2px; background:silver; /* border-top:1px solid #fefefe; */ padding:0; }
    </style>
    <style type="text/css">.jstree .ui-icon { overflow:visible; }
        .jstree a { padding:0 2px; }
    </style></head>


    <body>
        <div id="head"></div>

        <div id='content' class='ui-helper-clearfix'>
            <form name="aspnetForm" method="post" action="./test_files/test.htm" id="aspnetForm">
                <div>
                    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTczNTE4NjAPZBYCZg9kFgICAw9kFgICAQ9kFgYCBQ8WAh4LXyFJdGVtQ291bnQCBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI2Mg1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjENVEVTVF9GQUNJTElUWQMgOiAEdGV3dGQCBA9kFgJmDxUEAjYwDVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI1OQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIGDxYCHwACBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI1Nw1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjINVEVTVF9GQUNJTElUWQMgOiAEdGVzdGQCBA9kFgJmDxUEAjU4DVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI2MQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIHDxYCHwBmZGQolRp/M4dzIRG65MxM4hACjSHkZw==">
                </div>

                <div style="margin:45px 50px 10px 15px;">


                    <input type="button" id="connectionButton" value="Connections" class="bigButton jquery-ui-button ui-button ui-widget ui-state-default ui-corner-all" onclick="$(&#39;#connectionsModal&#39;).dialog(&#39;open&#39;); return false;" role="button">


                    <br><br><br>
                    <div id="lastInsertedTable" class="repeater ui-helper-clearfix">
                        <span>Recently Added</span>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <span style="float:left;width:100%;height:1px;"></span>
                </div>
            </form>
        </div>
        <div style="outline-width: 0px; outline-style: initial; outline-color: initial; width: 300px; top: -13px; left: 489px; height: auto; position: relative; z-index: 1002; display: none; " class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-connectionsModal"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-connectionsModal">Connections</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
            <div id="connectionsModal" class="m_dialog ui-dialog-content ui-widget-content" style="min-height: 80px; width: auto; height: auto; ">
                <a href="#" class="jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text" style="padding-left: 109.5px; ">Add</span></a>
                <a href="#" class="jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text" style="padding-left: 81px; ">Search/Edit</span></a>
            </div>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Cancel</span></button>
                </div>
            </div>
        </div>
    </body>
</html>
person Levi Morrison    schedule 23.06.2011

Для этой проблемы с заголовком диалогового окна вы можете просто добавить приведенный ниже атрибут в родительский класс диалогового окна.

.ui-dialog { clear: both; }

Для справки: заголовок диалогового окна jQuery UI слишком высокий

person Soundar    schedule 27.05.2013