Question

过去几天我一直在努力解决这个问题，我正在尝试使用下面的教程在asp.net中获得一个可编辑的网格视图系统：

Editable Grid View System using BootStrap in ASP.Net

我希望能够点击“添加新记录”并弹出模式应该显示并让我添加一条新记录，我遇到的问题是每当我点击“添加新记录”时

   <div class="modal-backdrop fade in"></div>

似乎涵盖了一切。

以下是一些描述问题的图片。

点击之前：

enter image description here

点击后：

enter image description here

我似乎无法找到造成这种情况的原因。

请查看我的代码：

   <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);
   }

我真的很感激任何建议。谢谢。

Answer 1

请参阅： Bootstrap modal appearing under background

$('#myModal').appendTo("body").modal('show');

为我做了伎俩

Answer 2

我只是添加了一些CSS样式来防止此问题：

.modal-backdrop{
    position:relative !important;
}

此方法甚至适用于嵌套模态。

在asp.net webforms中调用代码后，Bootstrap Modal坐在背景后面

2 个答案: