ASP.NET Bootstrap 模态

Question

我是 ASP.NET 的新手，所以如果我的功能有误，请原谅我。

我正在使用 Bootstrap，在选项卡和 UpdatePanel 中有一个按钮可以触发模态框。

Modal 位于屏幕后面并变黑了，我不太明白为什么。

如果我取出 UpdatePanel，它就可以工作。我需要 UpdatePanel，因为它位于一个带有操作 CheckBox 的选项卡中，如果没有 UpdatePanel，它会将用户发送回第一个选项卡。

<div class="tab-pane fade" id="neworder">
    <asp:UpdatePanel ID="up_New_Order" runat="server">
        <ContentTemplate>

            <div class="checkbox">
                <asp:CheckBox ID="cb_Auto_Fill" runat="server" Text="Auto fill last order" CssClass="checkbox" AutoPostBack="true" OnCheckedChanged="cb_Auto_Fill_CheckedChanged"></asp:CheckBox>
            </div>
            <div class="col-md-6">

                <!-- New Order -->
                <asp:panel class="row form-group has-feedback" id="Panel2" runat="server">
                    <label for="inputName" class="col-lg-4 control-label">Ordered By</label>
                    <div class="col-lg-8">
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                        <asp:TextBox CssClass="form-control" ID="tb_Ordered_By" placeholder="Customer name" runat="server"></asp:TextBox>
                    </div>
                </asp:panel>

                <asp:panel class="row form-group has-feedback" id="Panel5" runat="server">
                    <label for="inputSubject" class="col-lg-4 control-label">PO No/Agency</label>
                    <div class="col-lg-8">
                        <asp:TextBox CssClass="form-control" ID="tb_Po_Number" placeholder="PO No/Agency Ref" runat="server"></asp:TextBox>
                    </div>
                </asp:panel>

                <asp:panel class="row form-group has-feedback" id="Panel13" runat="server">
                    <label for="inputSubject" class="col-lg-4 control-label">Payment Type</label>
                    <div class="col-lg-8">
                        <asp:DropDownList ID="ddl_Payment_Type" runat="server" CssClass="form-control dropdown"></asp:DropDownList>
                    </div>
                </asp:panel>  

                <asp:panel class="row form-group has-feedback" id="Panel14" runat="server" Visible="false">
                    <label for="inputSubject" class="col-lg-4 control-label">Upload</label>
                    <div class="col-lg-8">
                        <input  type="file" 
                                style="visibility:hidden; width: 1px;height:1px" 
                                id='${multipartFilePath}' name='${multipartFilePath}'  
                                onchange="$(this).parent().find('span').html($(this).val().replace('C:\fakepath\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
                        <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
                        &nbsp;
                        <span  class="badge badge-important" ></span>
                    </div>
                </asp:panel> 


                <asp:panel class="row form-group has-feedback" id="Panel11" runat="server">
                    <label for="inputSubject" class="col-lg-4 control-label">Order Notes</label>
                    <div class="col-lg-8">
                        <asp:TextBox id="tb_Order_Notes" cssClass="form-control" TextMode="multiline" Columns="50" Rows="3" runat="server" />
                    </div>
                </asp:panel>   

            </div>
            <div class="col-md-6">

            <!-- New Order -->
            <asp:panel class="row form-group has-feedback" id="Panel7" runat="server">
                <label for="inputName" class="col-lg-4 control-label">Copy Contact</label>
                <div class="col-lg-8">
                    <asp:Label ID="Label2" runat="server"></asp:Label>
                    <asp:TextBox CssClass="form-control" ID="tb_Copy_Contact" runat="server"></asp:TextBox>
                </div>
            </asp:panel>

            <asp:panel class="row form-group has-feedback" id="Panel8" runat="server">
                <label for="inputName" class="col-lg-4 control-label">Copy Supply</label>
                <div class="col-lg-8">
                    <asp:TextBox CssClass="form-control" ID="tb_Copy_Supply" runat="server"></asp:TextBox>
                </div>
            </asp:panel>

            <asp:panel class="row form-group has-feedback" id="Panel9" runat="server">
                <label for="inputEmail" class="col-lg-4 control-label">Copy Tel</label>
                <div class="col-lg-8">
                    <asp:TextBox CssClass="form-control" ID="tb_Copy_Tel" runat="server"></asp:TextBox>
                </div>
            </asp:panel>

            <asp:panel class="row form-group has-feedback" id="Panel10" runat="server">
                <label for="inputSubject" class="col-lg-4 control-label">Copy Email</label>
                <div class="col-lg-8">
                    <asp:TextBox CssClass="form-control" ID="tb_Copy_Email" runat="server"></asp:TextBox>
                </div>
            </asp:panel>
            <div class="row form-group">

            </div>
            <div class="row form-group">
                <div class="col-lg-12">
                    <asp:Button Text="Create Order" ID="btn_Create_Order" CssClass="btn btn-primary btn-block" OnClick="btn_Create_Order_Click" runat="server" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

模式位于我的内容结束标记上方，我将其命名为：

protected void btn_Create_Order_Click(object sender, EventArgs e)
{
    lblModalTitle.Text = "Modal Title";
    lblModalBody.Text = "Modal Body.";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal().appendTo('body');", true);
    upModal.Update();

    //pnlAlertBox.Visible = true;
}

这是模态框（我正在重复使用它，所以我知道它确实有效）。

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

Answer 1

我在示例项目中尝试了您的代码，bootstrap 模态正常工作。我正在使用 jquery 2.1.3

可能是您使用的 jquery 版本导致了问题。

ASP.NET Bootstrap 模态

ASP.NET Bootstrap Modal

asp.net

twitter-bootstrap

bootstrap-modal