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

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条回答 默认 最新

  • qiandd9527
    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>
    点赞 评论
  • showbo
    
    <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>
    点赞 1 评论

相关推荐