I am currently developing a website using ASP.NET (Framework 4.0).
The Master page includes all the necessary Bootstrap and jQuery files, as shown below.
<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>
However, I have encountered an issue where the Bootstrap modal does not work properly when clicking on a button.
https://i.sstatic.net/XPQ30.png
The functionality should be triggered on a button click within a child page.
Below is the code snippet from the child page, 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);
}
Here is the Bootstrap modal code in the child page (page1.aspx):
<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>