DIV Inhalt zeigt auf Seite anstelle von JQuery Dialog

Question

ich habe folgende DIV-Markup:

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

ich folgende Javascript haben die JQuery auszuführen:

<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> 

Ich habe eine Asp: Button, befindet sich in einem Steuerelement und das Steuerelement befindet sich auf einer Masterseite. Das erste, was ich bemerke, ist, dass beim Laden der Seite das Div angezeigt wird und dann verschwindet, wenn die Seite fertig geladen ist. Wenn ich auf die Schaltfläche klicken führt es die folgenden:

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

Wenn ich auf die Schaltfläche klicken, anstelle eines Dialog Aufspringen, nur der Inhalt des div sichtbar wird.

Answer 1

Ich glaube, Sie haben zwei verwandte Probleme hier.

Der Grund, dass das DIV beim ersten Laden angezeigt wird, ist, dass Sie es noch nicht gesagt haben. Das jQuery-Skript, das den DIV als Dialog definiert, wird erst ausgeführt, wenn das HTML-DOM geladen ist. Bis dahin wird das DIV nicht verborgen. Eine einfache Lösung besteht darin, das DIV standardmäßig mit CSS zu verbergen.

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

auf die Schaltfläche klicken Problem ist verwandt: RegisterClientScriptBlock ausgeben wird ein Skript, das sobald es läuft angetroffen wird, so dass die jQuery-Code, der es in einen Dialog verwandelt hat eine Chance zu laufen noch nicht gehabt. Um die Möglichkeit dazu zu geben, können Sie den C# -Code ändern, um RegisterStartupScript zu verwenden, was die Ausführung von showjQueryDialog() verzögert, bis die Seite vollständig geladen ist und der jQuery-Code eine Chance hatte, das DIV zu einem Dialog zu machen.

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

Answer 2

Stellen Sie sicher, dass Sie den richtigen Doctype oben auf Ihrer Seite angeben, dies scheint die Ursache für einige Probleme zu sein, die ich gesehen habe.

edit:

, auch, damit er nicht am Anfang zu blinken können Sie so etwas wie

#debug { display: none; } 

irgendwo vor dem Element (höchstwahrscheinlich Ihr Sheet oder im Kopf) haben.

eine andere Sache, die helfen könnten, wenn Sie Satz setzen:

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

in der Seite zu laden oder ähnlich, so wie Sie es sonst ein Postback (asynchron oder anderweitig) benötigen.

Answer 3

Der Grund, warum es nicht angezeigt wird, ist, weil das Dokument wahrscheinlich noch nicht geladen wurde. und document.ready wurde nicht aufgerufen, daher wird der Dialog ("open") vor dem Dialog ({options}) aufgerufen; Um dies zu beheben, fügen Sie einfach den Code zu einem doc.ready-Aufruf hinzu.

Auch Ihr nur den Dialog einmal geladen, so müssen Sie nicht wirklich als AutoOpen- initialisieren: false, verwenden Sie das display: none zeigen sie dann als John Boker sagte

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

ich das wissen ist jetzt alt. Setzen Sie Ihre Klasse jedoch auf die in ui-helper-hidden integrierte jQuery-UI.

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

Dies wird das unerwünschte Cameo-Verhalten Ihres div auflösen.