1、在aspx中添加,将依赖添加进来
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<script src="Scripts/jquery-3.7.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
2、添加模态对话框的div
<!-- 添加对话框 -->
<div class="modal fade" id="AddModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="AddModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
3、我封装了两个C#函数来显示和隐藏bootstrp的对话框
public void showModal(string id)
{
string script = "var myModal = new bootstrap.Modal(document.getElementById('" +
id +
"'), {\r\n keyboard: false\r\n});" +
"myModal.show()";
ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);
}
public void hideModal(string id)
{
string script = "var myModal = new bootstrap.Modal(document.getElementById('" +
id +
"'), {\r\n keyboard: false\r\n});" +
"myModal.hide()";
ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);
}
这样调用
protected void BtnAdd_Click(object sender, EventArgs e)
{
// 弹框获取信息
showModal("AddModal");
}
至于获取数据其他的就要交给你去将aspx中的对话框部分,稍作修改,将button改成asp:Button这样来获取数据,加油!!!