Bootstrap模式没有正确加载

时间:2016-02-08 02:21:40

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

我在ASP.NET(Framework 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模式在按钮上无法正常工作。

Bootstrap Modal

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

子页面代码。 (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>

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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