contenu DIV montre à la page au lieu de JQuery Dialog

Question

Je le balisage DIV suivant:

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

Je le javascript suivant pour exécuter le 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> 

je un aspic: Bouton qui est à l'intérieur d'un contrôle et le contrôle est sur une page maître. La première chose que je remarque est que lorsque la page est chargée, la div est affichée, puis disparaît lorsque la page est chargée. Lorsque je clique sur le bouton, il exécute la commande suivante:

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

Lorsque je clique sur le bouton, au lieu d'une boîte de dialogue apparaître, le contenu de la div tout devient visible.

Answer 1

Je crois que vous avez deux problèmes connexes ici.

La raison pour laquelle le DIV est affiché lors du premier chargement est parce que vous ne lui avez pas encore dit de ne pas le faire. Le script jQuery qui fait que le DIV se comporte comme une boîte de dialogue ne s'exécute pas tant que le DOM HTML n'est pas chargé, et jusque-là il ne cache pas le DIV. Une solution simple consiste à masquer la DIV par défaut en utilisant CSS.

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

Le bouton problème de clic est lié: RegisterClientScriptBlock émet un script qui fonctionne dès qu'il est rencontré, de sorte que le code jQuery qu'il se transforme en une boîte de dialogue n'a pas eu la chance de courir encore. Afin de lui donner une chance de le faire, vous pouvez modifier le code C# pour utiliser RegisterStartupScript, ce qui retardera l'exécution de showjQueryDialog() jusqu'à ce que la page ait fini de se charger et que le code jQuery ait eu la chance de transformer le DIV en boîte de dialogue.

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

Answer 2

assurez-vous que vous spécifiez le doctype correct en haut de votre page, cela semble être la cause de certains problèmes que j'ai vus.

modifier:

aussi, pour l'empêcher de clignoter au début, vous pouvez avoir quelque chose comme

#debug { display: none; } 

quelque part avant l'élément (plus probable que votre feuille de style ou dans la tête).

une autre chose qui pourrait aider est si vous mettez ensemble:

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

la charge de la page ou similaire, de cette façon vous n'aurez pas besoin d'un postback (asynchrone ou autre).

Answer 3

La raison pour laquelle cela n'apparaît pas est que le document n'a probablement pas encore été chargé. et document.ready n'a pas été appelé, ainsi dialog ("open") est appelé avant le dialogue ({options}); Donc, pour résoudre ce problème, ajoutez simplement le code dans un appel doc.ready.

En outre, votre seul chargement de la boîte de dialogue une fois, si vous avez vraiment pas besoin de l'initialiser comme Autoopen: false, utilisez le display: none montre alors comme John Boker dit

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

Je sais ce est vieux maintenant. Cependant, définissez votre classe sur l'interface utilisateur jQuery intégrée dans ui-helper-hidden.

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

Ceci résoudra le comportement de cam de votre div non désiré.