无法从服务器端 ASP.NET 代码获取 Bootstrap 模态 window 打开
Trouble getting Bootstrap modal window to open from server-side ASP.NET code
我在从服务器端 ASP.NET 代码获取模态 Bootstrap window 打开时遇到问题,尽管我已经遵循了我在此处找到的所有示例。代码执行,我没有收到 JavaScript 错误,但模态 window 从未出现。
这是模态 window HTML:
<div id="StatusPopUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">Credentials Not Found</h4>
</div>
<div class="modal-body">
<p class="text-justify">
The email address and/or password entered do not match our records. Please try your login again if you believe this is an
error.
</p>
<p class="text-justify">
If you are an associate and need credentials for use of the Portal then please contact your regional office
or Team Sales Lead to request them.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
这是打开模式的 Javascript 代码:
<script type="text/javascript">
function Show() {
$("#StatusPopUp").modal("show");
}
</script>
最后,这是用于打开模式的服务器端代码:
protected void btnGo_Click(object sender, EventArgs e) {
bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
if ( isValid )
this.Response.Redirect ( "associates/home.aspx", true );
else
ClientScript.RegisterStartupScript ( this.GetType ( ), "alert", "Show();", true );
}
目标是当用户尝试在登录页面登录但不成功时,模式应弹出一条消息。正如我所说,所有代码都按照编写的方式执行,但它仍然不会让模态 window 实际上出现在浏览器中。有帮助吗?
如果模式的显示仅由服务器端在页面重新加载时的响应触发,我会重构一下,使用 asp:panel
并将 javascript 移动到您的常规jquery $(document).ready()
函数。
这样模态 HTML 甚至在需要时才呈现,并且您可以更好地控制何时调用显示模态的脚本。您不必兼顾任何外部脚本加载等。
aspx
<asp:panel id="pnlStatusPopUp" runat="server" visible="false">
<div id="StatusPopUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">Credentials Not Found</h4>
</div>
<div class="modal-body">
<p class="text-justify">
The email address and/or password entered do not match our records. Please try your login again if you believe this is an
error.
</p>
<p class="text-justify">
If you are an associate and need credentials for use of the Portal then please contact your regional office
or Team Sales Lead to request them.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</asp:panel>
.cs
protected void btnGo_Click(object sender, EventArgs e) {
bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
if ( isValid )
this.Response.Redirect ( "associates/home.aspx", true );
else
pnlStatusPopUp.visible = true;
}
js
$(document).ready(function(){
$("#StatusPopUp").modal("show");
});
我在从服务器端 ASP.NET 代码获取模态 Bootstrap window 打开时遇到问题,尽管我已经遵循了我在此处找到的所有示例。代码执行,我没有收到 JavaScript 错误,但模态 window 从未出现。
这是模态 window HTML:
<div id="StatusPopUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">Credentials Not Found</h4>
</div>
<div class="modal-body">
<p class="text-justify">
The email address and/or password entered do not match our records. Please try your login again if you believe this is an
error.
</p>
<p class="text-justify">
If you are an associate and need credentials for use of the Portal then please contact your regional office
or Team Sales Lead to request them.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
这是打开模式的 Javascript 代码:
<script type="text/javascript">
function Show() {
$("#StatusPopUp").modal("show");
}
</script>
最后,这是用于打开模式的服务器端代码:
protected void btnGo_Click(object sender, EventArgs e) {
bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
if ( isValid )
this.Response.Redirect ( "associates/home.aspx", true );
else
ClientScript.RegisterStartupScript ( this.GetType ( ), "alert", "Show();", true );
}
目标是当用户尝试在登录页面登录但不成功时,模式应弹出一条消息。正如我所说,所有代码都按照编写的方式执行,但它仍然不会让模态 window 实际上出现在浏览器中。有帮助吗?
如果模式的显示仅由服务器端在页面重新加载时的响应触发,我会重构一下,使用 asp:panel
并将 javascript 移动到您的常规jquery $(document).ready()
函数。
这样模态 HTML 甚至在需要时才呈现,并且您可以更好地控制何时调用显示模态的脚本。您不必兼顾任何外部脚本加载等。
aspx
<asp:panel id="pnlStatusPopUp" runat="server" visible="false">
<div id="StatusPopUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">Credentials Not Found</h4>
</div>
<div class="modal-body">
<p class="text-justify">
The email address and/or password entered do not match our records. Please try your login again if you believe this is an
error.
</p>
<p class="text-justify">
If you are an associate and need credentials for use of the Portal then please contact your regional office
or Team Sales Lead to request them.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</asp:panel>
.cs
protected void btnGo_Click(object sender, EventArgs e) {
bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
if ( isValid )
this.Response.Redirect ( "associates/home.aspx", true );
else
pnlStatusPopUp.visible = true;
}
js
$(document).ready(function(){
$("#StatusPopUp").modal("show");
});