如何从代码后面关闭引导模态？

Question

我正在从模式进行更新操作。当模式弹出时，其负载特定的行数据我要更新。下面是我的模式代码：

<form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="myModal" class="modal fade" role="dialog" runat="server" draggable="auto">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Insert Module</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td colspan="2" style="text-align: center">
                                            <label>UPDATE EMPLOYEE DETAIL</label>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label>FIRST NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb1" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender7" targetcontrolid="up_tb1" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>MIDDLE NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb2" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender8" targetcontrolid="up_tb2" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>LAST NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb3" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender9" targetcontrolid="up_tb3" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>EMAIL</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb4" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender10" targetcontrolid="up_tb4" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>DOB</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb5" runat="server" Enabled="false"></asp:TextBox>
                                            <ajax:calendarextender id="CalendarExtender2" runat="server" popupbuttonid="ImageButton1" targetcontrolid="up_tb5"></ajax:calendarextender>
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/calendar146.png" Width="16px" Height="16px" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>USERNAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb6" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender12" targetcontrolid="up_tb6" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>PASSWORD</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb7" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <asp:ValidationSummary ID="ValidationSummary2" runat="server"
                                DisplayMode="BulletList" ShowSummary="true" HeaderText="Errors:" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

我正在从后面的代码加载模式，并从后面的代码填充其字段。下面是我的代码隐藏代码：

protected void up_tb8_Click(object sender, EventArgs e)
    {
        var db = new dbDataContext();
        Employee emp = new Employee();
        db.Sp_Updatevalue(up_id, up_tb1.Text, up_tb2.Text, up_tb3.Text, up_tb4.Text, Convert.ToDateTime(up_tb5.Text), up_tb6.Text, up_tb7.Text);
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ClosePopup();", true);
     }

当我单击更新按钮时，它将成功运行我的更新存储过程并更新数据库中的值。问题是什么时候数据更新模式弹出窗口消失了，但它的暗灰色背景仍然固定在我的屏幕上，所以我想在记录已更新并且gridview刷新并显示更新的记录时正确关闭模式。

Answer 1

如果用户控件 (ascx) 包含在模态中，则：

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

不管用。而不是这个，你应该使用this.Page。

正确的解决方法：

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", "$('#myModal').modal('hide');", true);

Answer 2

你可以尝试用这个：

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

或者您可以在 JS 文件中定义一个 ClosePopup 函数来执行此操作，然后在执行时调用它。

function ClosePopup(){
$('#myModal').modal('hide');
}