Как предотвратить прокрутку вверх страницы при появлении диалогового окна jQuery UI?

У меня была такая же проблема, но я не мог решить проблему с помощью flexbox выше. Поэтому я создал свой собственный шаблон, который включает в себя:

  • заголовок с элементом фиксированного размера
  • нижний колонтитул
  • боковой панель с полосой прокрутки, которая занимает остальную высоту
  • content

Я использовал flexboxes, но более простым способом, используя только отображение свойств: flex и flex-direction: row | column:

Я использую угловые и хочу, чтобы размеры моего компонента составляли 100% от их родительского элемента.

Ключ должен установить размер (в процентах) для всех родителей, чтобы ограничить их размер , В следующем примере высота myapp имеет 100% окна просмотра.

Основной компонент имеет 90% окна просмотра, потому что верхний и нижний колонтитулы имеют 5%.

Я разместил здесь свой шаблон : https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:


CONTENT

29
задан tvanfosson 20 July 2009 в 21:41
поделиться

2 ответа

Используете ли вы тег привязки для реализации «кнопки», которая открывает диалоговое окно? Если это так, вам нужно, чтобы обработчик кликов, открывающий диалоговое окно, возвращал false, чтобы не вызывалось действие по умолчанию тега привязки. Если вы используете кнопку, вам также необходимо убедиться, что она не отправляется (путем возврата false из обработчика) и полностью обновляет страницу.

Например,

$('a.closeButton').click( function() {
     $('#dialog').dialog('open');
     return false;
});


<a class='closeButton'>Close</a>
69
ответ дан 28 November 2019 в 00:49
поделиться

измените свой код следующим образом

$('a.closeButton').click( function(e) {
    e.preventDefault();
     $('#dialog').dialog('open');
});
7
ответ дан 28 November 2019 в 00:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: