JQuery动态插入Bootstrap模态框（Modal）

这里所说的动态插入，是指用JS的append()方式追加元素内容，而不是静态写在HTML里面。

为什么会用到这种方式呢？比如登录框。有些网站在大部分页面都有登录按钮，如果是用Bootstrap的模态框调用的话，常规方式都是写在HTML里面，这就不太方便后期修改，因为你一旦要修改就要动到很多个页面！

这里也不多说什么了，先看效果图：

这里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1，先来看代码：

var loginModal = "    <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">\n";
loginModal += "        <div class=\"modal-dialog modal-dialog-centered\">\n";
loginModal += "            <div class=\"modal-content\">\n";
loginModal += "                <div class=\"modal-header\">\n";
loginModal += "                    <h5 class=\"modal-title text-info\">会员登录</h5>\n";
loginModal += "                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"关闭\">\n";
loginModal += "                        <span aria-hidden=\"true\">×</span>\n";
loginModal += &#