Содержимое DIV отображается на странице вместо JQuery Dialog

У меня есть следующая разметка DIV:

<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>

У меня есть следующий javascript для выполнения JQuery:

<script type="text/javascript">
function showjQueryDialog() {
    $("#dialog").dialog("open");
    //alert("Time to renew Membership!");
}

$(document).ready(function() {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
    });
});
</script>

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

if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",    
"showjQueryDialog()", true);
}

Когда я нажимаю кнопку, вместо того, чтобы появляться диалог, содержимое div просто становится видимым.

Ответ 1

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

Причина, по которой DIV показывает, когда вы впервые загружаете, потому что вы еще этого не сказали. JQuery script, который заставляет DIV вести себя как диалог, не запускается до загрузки HTML DOM, и до тех пор он не скрывает DIV. Простым решением является скрыть DIV по умолчанию с помощью CSS.

<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>

Проблема с нажатием кнопки связана: RegisterClientScriptBlock выводит script, который запускается, как только он встречается, поэтому код jQuery, который превращает его в диалог, еще не успел запустить. Чтобы дать ему возможность сделать это, вы можете изменить код С# на использование RegisterStartupScript, что задержит выполнение showjQueryDialog() до тех пор, пока страница не закончит загрузку, а код jQuery не сможет сделать DIV в диалог.

if (timeSpan.Days >= 30)
{
  //Show JQuery Dialog Here
    ScriptManager.RegisterStartupScript(this, typeof(Page), 
        "showExpiration", "showjQueryDialog()", true);
}

Ответ 2

Я знаю, что это уже старо. Однако, установите свой класс в пользовательский интерфейс jQuery, встроенный в скрытый интерфейс ui-helper.

<div id="dialog" title="Membership Renewal" class="ui-helper-hidden"> 
    Your membership is going to expire. 
</div>

Это решит ваше нежелательное поведение камео.

Ответ 3

убедитесь, что вы указали правильный doctype в верхней части страницы, это, по-видимому, является причиной некоторых проблем, которые я видел.

изменить:

также, чтобы он не начинал мигать с самого начала, вы можете иметь что-то вроде

#debug { display: none; }

где-то перед элементом (скорее всего, ваша таблица стилей или в голове).

еще одна вещь, которая может помочь, - если вы положили set:

OnClientClick="showjQueryDialog(); return false;";

в загрузке страницы или подобном, вам не понадобится обратная передача (асинхронная или иначе).

Ответ 4

Причина его не показывает, потому что документ, вероятно, еще не загружен. и document.ready не вызывается, поэтому диалог ( "открыть" ) вызывается перед диалогом ({options}); поэтому, чтобы исправить это, просто добавьте код в вызов doc.ready.

Кроме того, вы загружаете только один раз один раз, поэтому вам не нужно инициализировать его как autoOpen: false, используйте дисплей: none, а затем покажите его, как сказал Джон Бокер

function showjQueryDialog() {
  $(document).ready(function() {
    $("#dialog").dialog({
        modal: true,
        buttons: { "Renew Membership": function() { $(this).dialog("close"); } });
    $("#dialog").show();  // sets display:block;
    //alert("Time to renew Membership!");
  });
}

<div id="dialog" style="display:none">
  <!--..-->
</div>