Below is a minimal example in ASP.NET Web Forms.
<script>
function ShowMessage(message) {
$('#exampleModal div.modal-body').text(message);
$('#exampleModal').modal('show')
}
</script>
Code behind
namespace WebFormsDemo.Bootstrap
{
public partial class Alert : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowMessage('Message to display');", true);
}
}
}
Bootstrap modal
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Keep in mind, your original screenshot loads two different versions of jQuery and jQueryUI and Bootstrap are competing frameworks. Use one or the other not both. The example above uses jQuery 3 and Bootstrap 3
<script src="../Scripts/jquery-3.6.0.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>