Bootstrap modal doesn't load properly

Question

I'm Creating a website in ASP.NET (Framework 4.0).

A Master page has required bootstrap files & jquery files are added in it. files are as

 <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 doesn't work properly on button Click.

On child page button click this should work.

child page code. (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);
}

child page (page1.aspx) Bootstrap modal code as follows.

<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>

Answer 1

Just add this code line in css file.

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

Answer 2

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

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