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>

 

感谢您的帮助。

<!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>

 


<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">标题2</li>
</ul>

<script>
    $('[data-toggle="modal"]').each(function () {
        var id = this.dataset.target.substring(1), title = this.getAttribute('title');
        var html = '<div class="modal fixed-left fade" id="' + id + '" 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/'+id+'.json">'
                     +'<thead class="js-thead"></thead>'
                 +'</table>'
             +'</div>'
         +'</div>'
     +'</div>'
 + '</div>';

        $(document.body).append(html);
    })
</script>