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条)

报告相同问题？

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？