Twitter bootstrap 引导模式在内容脚本中呈现不正确

我试图从我的Chrome扩展插件向页面中注入引导模式，但它的模式格式不正确

下图是正确的：

但是，当我按下蓝色按钮时，它会显示格式非常糟糕的模式：

它应该表现出与此不一样的东西：

我怎么修理它

编辑：结果表明模式在calendar.google.com上显示正确，在docs.google.com上显示正确。这是否意味着页面样式会产生干扰？如何消除干扰

My manifest.json：

{
  "name": "Know",
  "version": "1.0",
  "manifest_version": 2,
  "web_accessible_resources": ["modal/modal.html"],

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["lib/bootstrap.min.css"],
      "js": [
        "lib/jquery-3.5.1.slim.min.js",
        "lib/bootstrap.bundle.min.js",
        "modal/modal.js"
      ],
      "run_at": "document_idle"
    }
  ]
}

---

（在it中，我是正确地注入HTML还是有更好的方法？

您好，您是否遵循了官方文档中的“如何工作”部分？

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

fetch(chrome.runtime.getURL('modal/modal.html'))
    .then(data => data.text())
    .then(text => {
        let myDiv = document.createElement("div");
        myDiv.id = 'myDiv';
        myDiv.innerHTML = text;
        document.body.appendChild(myDiv);
    });