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

Question

У меня есть следующая разметка 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 просто становится видимым.

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

Причина, по которой он не отображается, заключается в том, что документ, вероятно, еще не загружен. и document.ready не был вызван, поэтому диалоговое окно («open») вызывается перед диалоговым окном ({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>

Answer 4

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

редактирование:

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

#debug { display: none; }

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

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

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

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