I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below. The page also imports .css for the pop up which includes mark up and script.
<!-- 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 -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page? I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
