引导模式无法正确加载答案

【问题标题】：Bootstrap modal doesn't load properly引导模式无法正确加载
【发布时间】：2016-02-08 02:21:40
【问题描述】：

我正在用 ASP.NET（框架 4.0）创建一个网站。

母版页具有所需的引导文件，其中添加了 jquery 文件。文件如

 <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../Styles/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="../Styles/js/bootstrap.min.js" type="text/javascript"></script>

Bootstrap modal 在按钮 Click 上无法正常工作。

在子页面按钮上单击应该可以工作。

子页面代码。 (page1.aspx.cs)

protected void Button1_Click(object sender, EventArgs e)
{
   lblModal2.Text = "Please Add Item To Cart";
   ScriptManager.RegisterStartupScript(Page, Page.GetType(), "warning","$('#warning').modal();", true);
}

子页面（page1.aspx）Bootstrap模态代码如下。

<div class="modal fade" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-header-warning">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×</button>
                    <h1>
                        <i class="fa fa-exclamation-triangle"></i>Warning
                    </h1>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblModal2" runat="server" Text=""></asp:Label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

【问题讨论】：

$("#warning").modal("show"); 应该是正确的代码。
@Hemal 在 ScriptManager 中添加您的代码会出错。
您能描述一下它现在无法正常工作的原因以及它应该如何工作吗？
Bootstrap Modal 位于黑色透明层的后面，如上图所示。但它应该在黑色透明层之上
根据您的代码 ScriptManager.RegisterStartupScript(Page, Page.GetType(), "warning", "$('#warning').modal("show") ;“，真的）;给出错误

标签： javascript jquery css asp.net twitter-bootstrap

【解决方案1】：

只需在 css 文件中添加此代码行即可。

.modal-backdrop {
  z-index: -1;
}

【讨论】：

【解决方案2】：

删除$('#warning').appendTo("show")并替换为

$('#warning').appendTo("body") ;

【讨论】：

语法正确，当我删除（“body”）时，所有错误都消失了。并保持这样 $('#warning').appendTo() ;所有错误都消失了
您的 HTML 页面上可能存在一些错误，无论是 HTML 还是脚本，可能缺少一些结束标记或结束括号。
脚本如下：ScriptManager.RegisterStartupScript(Page, Page.GetType(), "warning", "$('#warning').appendTo("body");", true);.Gives error ) 预期
在body.$('#warning').appendTo('body') ;周围加上单引号