crenn 2021-03-02 16:20 采纳率: 100%
浏览 182
已采纳

bootstrap4 动态生成 modal

点击以下链接后，动态生成弹出层：

<ul>
    <li data-toggle="modal" data-target="#n001" title="001 标题1">标题1</li>
    <li data-toggle="modal" data-target="#n002" title="002 标题2">标题2</li>
</ul>

动态生成的弹出层有 3 个要求：

  1. 动态生成的层 id = 链接中的 data-target 值；
  2. modal-title = 链接中的 title；
  3. data-url = data-target 中的值加上后缀 .json。
<div class="modal fixed-left fade" id="n001" role="dialog">
    <div class="modal-dialog modal-dialog-aside" role="document">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">001 标题1</h5></div>
            <div class="modal-body">
                <table class="table table-bordered da-table" data-toggle="table" data-flat="true" data-url="json/n001.json">
                    <thead class="js-thead"></thead>
                </table>
            </div>
        </div>
    </div>
</div>

感谢您的帮助。

  • 写回答

2条回答 默认 最新

  • 0朱老大0 2021-03-02 18:24
    关注
    <!DOCTYPE html>
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<ul>
    <li data-toggle="modal" data-target="#n001" title="001 标题1">标题1</li>
    <li data-toggle="modal" data-target="#n002" title="002 标题2">标题2</li>
    <li data-toggle="modal" data-target="#n003" title="003 标题3">标题3</li>
</ul>

<script>
    $('[data-toggle="modal"]').each(function () {
        let target = this.dataset.target.substring(1), 
            title = this.getAttribute('title');
        let html = `
        <div class="modal fixed-left fade" id="${target}" role="dialog">
            <div class="modal-dialog modal-dialog-aside" role="document">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">${title}</h5></div>
                    <div class="modal-body">
                        <table class="table table-bordered da-table" data-toggle="table" data-flat="true" data-url="json/${target}.json">
                            <thead class="js-thead"></thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>`

        $(document.body).append(html);
    })
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测