logo标签列表

如何从代码后端关闭Bootstrap模态框？

javascriptc#jqueryasp.nettwitter-bootstrap
7

我正在使用模态框进行更新操作。当模态框弹出时，它会加载特定行数据以供我更新。 以下是我的模态框代码：

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

当我点击更新按钮时，它成功地运行了我的更新存储过程，并从数据库中更新了值。问题在于，当数据更新模态窗口消失时，它的暗灰色背景仍然固定在我的屏幕上。我想在记录已更新并且我的网格视图刷新并显示我的更新记录时，正确关闭模态窗口。

请参见"问题标题中是否应包含“标签”？"，共识是“不应该”！ - user57508
8个回答
6
如果用户控件（ascx）被包裹在模态框内，那么这样做：
 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

这种写法是错误的。

你需要使用this.Page代替this。

正确的解决方案如下：

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", "$('#myModal').modal('hide');", true);
4
你可以尝试使用以下方法：
 ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#myModal').hide();", true);

对我来说它有效..！

3
您可以更改服务器按钮 -
 <asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />

转化为类似于这样的格式 -

<button id="up_tb8" type="button" class="btn btn-default" data-dismiss="modal" runat="server" onserverclick="up_tb8_Click">UPDATE</button>

希望这能够奏效。

3

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal1", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();", true);

2
请通过添加信息来解释为什么这个答案是正确的。点击此处了解更多信息。 - Matthijs
1
这段代码运行得非常好...
c#:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true);

VB.Net:

ScriptManager.RegisterStartupScript(me, me.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true)
0
你可以尝试使用这个：
 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

或者你可以在JS文件中定义一个ClosePopup函数来完成它，然后像之前一样调用它。
function ClosePopup(){
$('#myModal').modal('hide');
}
1
正如我在问题中提到的，使用上述代码关闭了模态窗口，但是暗灰色背景仍然存在，并且GridView不显示更新后的值，除非我通过单击Chrome刷新按钮重新加载整个页面。请帮助我正确关闭模态窗口。如果我在asp.net按钮内部使用data-dismiss="modal"属性，它会正确关闭模态窗口，但不会更新记录。 - Ahmer Ali Ahsan
@AhmerAliAhsan，你是否解决了背景（暗灰色背景）隐藏的问题？ - Adrian P
0

我的应用程序中有类似的东西。我通过在按钮单击时从数据库重新绑定数据来刷新我的网格。在javascript的closepopup()函数中，在关闭模态框之后，我调用按钮单击事件来刷新我的数据网格。您可以像我一样创建一个隐藏的按钮进行绑定并执行单击事件。

一些代码示例：

这是刷新按钮：

<asp:Button ID="btnClearFilter" runat="server" Text="Refresh" onclick="btnClearFilter_Click" />

代码后台：

    protected void btnClearFilter_Click(object sender, EventArgs e)
    {
        FillGrid(); //here I bind to datagrid
    }

当弹出窗口关闭时：

    function closepopup() {
        $find('thisModalPopupExtender').hide();  
        document.getElementById("<%= btnClearFilter.ClientID %>").click();  //click event on refresh button
    }

不是最好的解决方案，但它有效 :)

0

给关闭按钮添加Id属性和runat="server"。

在C#代码后台中，

 btnId1.Attributes.Add("class", "close");

这里的 btnId1 是关闭按钮的 Id 名称。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接