在 asp.net webforms 中调用代码时，Bootstrap Modal 坐在背景后面
Posted
技术标签:
【中文标题】在 asp.net webforms 中调用代码时，Bootstrap Modal 坐在背景后面【英文标题】：Bootstrap Modal sitting behind backdrop when calling code behind in asp.net webforms 【发布时间】：2014-06-11 19:37:46 【问题描述】：过去几天我一直在努力解决这个问题， 我正在尝试使用休闲教程在 asp.net 中获得可编辑的网格视图系统：
Editable Grid View System using BootStrap in ASP.Net
我希望能够点击“添加新记录”并且应该显示弹出模式并让我添加新记录，我遇到的问题是每当我点击“添加新记录”时
<div class="modal-backdrop fade in"></div>
似乎涵盖了一切。
这里有一些描述问题的图片。
在我点击之前：
点击后：
我似乎无法找到造成这种情况的原因。
请看我的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Script/jquery-2.0.3.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center">
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<h1>Grid View System</h1>
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<asp:GridView ID="grdvCrudOperation" runat="server" Width="940px" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="ID" CssClass="table table-hover table-striped" OnRowCommand="grdvCrudOperation_RowCommand">
<Columns>
<asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="deleteRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Delete" HeaderText="Delete Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="EmailID" HeaderText="EmailID" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="Contact" HeaderText="Contact NO" />
</Columns>
</asp:GridView>
<asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info" OnClick="btnAdd_Click" />
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Details</h3>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White" ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush" FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False">
<Fields>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="EmailID" HeaderText="EmailID" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="Contact" HeaderText="Contact NO" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand" />
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<asp:HiddenField ID="HfUpdateID" runat="server" />
<table class="table">
<tr>
<td>Name : </td>
<td>
<asp:TextBox ID="txtNameUpdate" runat="server"></asp:TextBox></td>
<td>
</tr>
<tr>
<td>EmailID</td>
<td>
<asp:TextBox ID="txtEmailIDUpdate" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td>
<asp:TextBox ID="txtAddressUpdate" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Contact No</td>
<td>
<asp:TextBox ID="txtContactUpdate" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" OnClick="btnSave_Click" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand" />
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div id="myModalContainer">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addModalLabel">Add New Record</h3>
</div>
<asp:UpdatePanel ID="upAdd" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table table-bordered table-hover">
<tr>
<td>Name : </td>
<td>
<asp:TextBox ID="txtNameAdd" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>EmailID :</td>
<td>
<asp:TextBox ID="txtEmailIDAdd" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Address:</td>
<td>
<asp:TextBox ID="txtAddressAdd" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Contact No:</td>
<td>
<asp:TextBox ID="txtContactAdd" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button ID="btnAddRecord" runat="server" Text="Add" CssClass="btn btn-info" OnClick="btnAddRecord_Click" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddRecord" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="delModalLabel">Delete Record</h3>
</div>
<asp:UpdatePanel ID="upDel" runat="server">
<ContentTemplate>
<div class="modal-body">
Are you sure you want to delete the record?
<asp:HiddenField ID="HfDeleteID" runat="server" />
</div>
<div class="modal-footer">
<asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="btn btn-info" OnClick="btnDelete_Click" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDelete" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</form>
后面的C#代码：
protected void btnAdd_Click(object sender, EventArgs e)
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#addModal').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);
我非常感谢任何建议。谢谢。
【问题讨论】：
感谢您的回复，实际上我通过查看闲置的答案设法解决了这个问题：Bootstrap Modal not working.(Asp.net, C#) 非常感谢您的建议，非常感谢。 【参考方案1】：见： Bootstrap modal appearing under background
$('#myModal').appendTo("body").modal('show');
帮我搞定了
【讨论】：
它有助于添加您链接到的文章摘要，以防这些链接消失。【参考方案2】：我只是添加了一些 CSS 样式来防止这个问题：
.modal-backdrop
position:relative !important;
此方法甚至适用于嵌套模式。
【讨论】：
以上是关于在 asp.net webforms 中调用代码时，Bootstrap Modal 坐在背景后面的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取
asp.net中使用listview，怎么实现根据条件改变行显示颜色？是在webform中！