JQuery диалог добавляет дополнительную высоту на страницу - PullRequest
Новая
       4

JQuery диалог добавляет дополнительную высоту на страницу

2 голосов
/ 19 ноября 2011

Я использую диалог jquery, чтобы открыть диалоговое окно.

Что происходит, когда открывается диалоговое окно, так это то, что оно показывает диалоговое окно, как и ожидалось, однако добавляет дополнительную высоту странице, и на большинстве разрешений экрана это вызывает появление вертикальной полосы прокрутки в браузере. Очевидно, что прокручивать вниз нечего, поэтому очень хотелось бы, чтобы динамическая полоса прокрутки отсутствовала. Я пытался расположить диалог div по всей странице, но я не могу от него избавиться. Это происходит в ie и Firefox.

Вот упрощенная версия кода: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#divjQueryPopup').dialog({
            autoOpen: false,
            draggable: true,
            width: 500,
            open: function (type, data) {
                $(this).parent().appendTo('form');
            }
        });
    });

    function showDialog(id) {
        $('#' + id).dialog('open');
    }

    function closeDialog(id) {
        $('#' + id).dialog('close');
    } 
</script>


<div style="height: 500px;">
    <div style="height:500px;">
        <input id="inpTest" type="button" value="Test" onclick="showDialog('divjQueryPopup');" />
    </div>

    <div id="divjQueryPopup" runat="server">
        <div style="padding:10px 20px 10px 20px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend 
            option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; 
            est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me 
            lius quod ii legunt saepius. Claritas est etiam processus dynamicus, 
            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, 
        </div> 
    </div>
</div>

Ответы [ 3 ]

6 голосов
/ 19 ноября 2011

Это происходит потому, что диалог «появляется» в нижней части экрана, а затем имеет стиль position: relative и top: -whatever px, чтобы переместить его в нужное положение.Этот стиль непосредственно применяется к div.

Div классы:
ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable

Непосредственно применяемый стиль:
display: block; z-index: 1001; outline: 0px none; position: relative; height: auto; width: 500px; top: -535.5px; left: 540px;

Вместо этого изменитестиль до: position: absolute с положительным верхом.

Вы можете проверить это с помощью firebug.

0 голосов
/ 19 ноября 2011

альтернативно, вы можете добавить body {height: 500px;} к вашему css.

небольшую скрипку для игры с

РЕДАКТИРОВАТЬ вэта эта версия является "абсолютным положением", примененным к диалогу

0 голосов
/ 19 ноября 2011

Вы получаете полосу прокрутки, потому что когда появляется окно сообщения, оно позиционируется с помощью

position:relative

Это сохраняет свою позицию в документе, но отображает div относительно ее исходной позиции.Поэтому, когда это становится видимым, страница становится длиннее.Вам необходимо изменить его на положение: абсолютное, чтобы оно было удалено из потока документов.Вам также нужно будет изменить координаты.

...