当前位置: 首页 > article >正文

C# WebForm显示bootstrap模态对话框

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这样来获取数据,加油!!!


http://www.kler.cn/a/596776.html

相关文章:

  • 中颖SH366000介绍和使用全解
  • [01-04-02].第20节:PyQt5库初识及实现简易计算器
  • 数智读书笔记系列022《算力网络-云网融合2.0时代的网络架构与关键技术》读书笔记
  • css基础-浮动
  • 【工具变量】全国地级市克鲁格曼专业化指数数据集(2006-2023年)
  • 基于蒙特卡洛方法的网格世界求解
  • 使用netDxf扩充LaserGRBL使它支持Dxf文件格式
  • 在刀刃上发力:如何精准把握计划关键节点
  • uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号
  • docker速通
  • OAuth 2.0认证
  • doris:负载均衡
  • 【数据预测】基于遗传算法GA的LSTM光伏功率预测 GA-LSTM光伏功率预测【Matlab代码#91】
  • OpenHarmony 开源硬件学习全指南:从入门到实战
  • JAVA - OJ沙箱(JAVA默认模板沙箱,JAVA操作dokcer沙箱)
  • MacOS安装 nextcloud 的 Virtual File System
  • LangChain组件Tools/Toolkits详解(6)——特殊类型注解Annotations
  • llama源码学习·model.py[4]Attention注意力(2)源码分析
  • 洛谷 [语言月赛 202503] 题解(C++)
  • (滑动窗口)算法训练篇11--力扣3.无重复字符的最长字串(难度中等)