将HTML内容导入其他HTML页面

Question

我正在更新我的网站，我正在尝试尽可能优化网站。我要做的其中一件事就是删除多余的文本和复制文本/代码。

我有大约20页，每个页面都包含一个按钮，使用下面的功能弹出我的隐私政策。 该页面还会为弹出窗口导入.css，其中包括标记和脚本。

<!-- Begin Footer -->
<div class="mainText">
  //site name etc
</div>

<div class="popup" onclick="myFunction()">
  <div class="privacyButton">
    Privacy Policy
  </div>
  <span class="popuptext" id="myPopup">
    <!-- Policy Content -->
      //html content like <p></p> and <strong> etc</strong>.
    <!-- End of Policy Content -->
  </span>
</div>

<script>
  // When the user clicks on div, open the popup
  function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
  }
</script>
<!-- End of Footer -->

如何将其放在单独的文件中并从外部文件中加载它以节省每个页面上有这么多文本？ 我已经尝试THIS使用jQuery，但由于弹出的性质，它不起作用。

我也试过只放置内容（这仍然比没有好）

<!-- Policy Content -->
  //html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->

...使用

在单独的.html文件中

<link rel="import" href="/movedContent.html">

...但在加载时，它不采用popuptext类中的css。

我不确定从何处开始或在任何外部文件中包含哪些内容，以便在每个页面上导入此内容。感谢。