Modal jQuery dialog versteckt hinter overlay in ASP.net
Ich entwickle einige Jquery dialog, und gefunden war der dialog, werden ausgeblendet, wenn ich Modal: true. Bei der Einstellung Modal: false, fand ich alles wie erwartet funktioniert. Hoffe mir kann jemand helfen.
<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />
<div id="dialog">
<h1>Test</h1>
<asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />
</div>
$(function () {
$("#btnOpendialog").click(function (e) {
$("#dialog").dialog("open");
return false;
});
$("#dialog").dialog({
height: 200,
modal: true,
autoOpen: false,
open: function () {
$(this).parent().appendTo($("form:first"));
}
});
});
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich es behoben. Es gibt nicht viele Leute, die beschweren sich über dieses Problem. Geht es nur mir so? Wie auch immer, hier ist, wie ich es behoben. Ganz einfach, wenn man weiß, wie.
$( ".selector" ).dialog({ appendTo: "#someElem" });
Habe ich versucht die akzeptierte Antwort, und es schien zu funktionieren in einigen Situationen, in anderen aber nicht. Mit der gleichen Idee, das ist der code, den ich kam mit diesem code...
.ui-dialog {
z-index: 9999 !important;
}
...basierend auf der Tatsache, dass der z-index von
.ui-widget-overlay
ist9998
.Zusätzlich, um das problem zu lösen, wo das overlay erstreckt sich nicht auf die volle Höhe der Seite (wie
.ui-widget-overlay
hat nur eine Höhe von1000%
), ich kam mit dieser:.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Müssen Sie aufhören, appendTo wie diese, und verwenden Sie das neue Dialogfeld die option "appendTo"
wie diese:
Entnommen jquery-ui-Dokumentation
http://api.jqueryui.com/dialog/#option-appendTo
Alles was ich brauche, war
z-index:1
angewendetui-dialog
. Es gab keinez-index
ich könnteui-widget-overlay
um diese Arbeit zu machen.Mache ich dies in WordPress einschließlich der 'jquery', 'jquery-ui-core', 'jquery-ui-dialog" - Skripte. Hier meine relevanten css:
Können Sie erstellen ein jsFiddle nachbauen, dieses Problem außerhalb Ihrer Umgebung? Wenn nicht, hier sind einige Ideen aus der Spitze von meinem Kopf:
Setzen Sie Ihr javascript in der ein Dokument bereit, block, etwa so:
Ändern btnOpendialog zu sein non-ASP.NET server-Kontrolle. Da alle es tut, ist, öffnen Sie die jquery dialog, es hat keine Notwendigkeit, ein server-Steuerelement. Ändern Sie diese: