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