Предотвращение мигания при использовании диалогового окна jQuery-UI и откат html div при отключенном JavaScript - PullRequest
0 голосов
/ 09 ноября 2019

У меня есть ситуация, когда мы используем диалоговое окно jQuery-UI для подтверждения отправки страницы, но возвращаемся к html div, когда javascript отключен. Проблема в том, что в режиме с поддержкой javascript html div кратко мигает («мигает»).

Вот как выглядит версия jQuery:

jQuery dialog

Вот как выглядит HTML-версия:

enter image description here

Поскольку версия jquery перехватывается перед изменением страницы, онапоявляется на той же странице, что и кнопка отправки перед отправкой;html-версия должна появиться после отправки, так что это происходит на следующей странице.

Как уже говорилось, jquery-версия быстро мигает html-версией.

Код для htmlвыглядит следующим образом:

$display_msg = '<div id="display_msg" class="display_msg_no_js">' . $_SESSION['errmsg'] . '</div>';

Обратите внимание, что в обеих версиях используется один и тот же html: либо отображается через jQuery-UI, либо через html.

CSS выглядит следующим образом:

.display_msg
{
    display: none;
}
.display_msg_no_js
{
    left: 15%;
    width: 67%;
    position: absolute;
    top: 12rem;
    font: bold 1.6rem 'Arial Black', sans-serif;
    border: 2px solid #800;
    color: #800;
    max-width: 40rem;
    padding: .5rem 1rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 4px 4px 12px #888;
}

jquery выглядит следующим образом:

$('#display_msg').addClass('display_msg').removeClass('display_msg_no_js').dialog(
{
    show: "fade",
    minHeight: 222,
    open: function(event, ui)
    {
        $(".ui-dialog-titlebar-close").hide();  // Remove the closing 'X' from the dialog
    },
    title: $('#display_msg').attr("title") || 'Notice',
    modal: true,
    resizable: false,
    width: 300,
    maxWidth: 300,
    fluid: true,
    buttons:
    {
        Ok: function()
        {
            $(this).dialog('close');
        }
    }
});

В поисках путей устранения моргания я наткнулся на страницуна Как скрыть элементы с помощью jQuery до того, как они будут отрисованы? , особенно ответ Райана Оре. Однако применение вариантов этих техник не работает. Мои результаты, которые устраняют моргание, также блокируют отображение html-версии.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...