How to include a html file into another?
<p>I am relatively new so I may not have done them right but I have tried them. The closest I got is the code I am including. It was work for awhile but the modals wouldn't "fire". I tried to remedy that and lost my inclusion. So here goes.</p>

<p>HTML</p>

<pre><code>&lt;!--============================================--&gt;
&lt;!--    End of Main Program, Modals Follow  --&gt;
&lt;!--============================================--&gt;
&lt;section id="activeModal"&gt;
     &lt;!--&gt; placeholder for every modal in this project &lt;/!--&gt;
     &lt;!--&gt; each modal is stored in a separate file (modals.html) &lt;/!--&gt;
     &lt;!--&gt; main.js builds an include with a js script, appends it here, and it executes (hopefully) &lt;/!--&gt;
&lt;/section&gt;&lt;!-- /activeModal --&gt;
</code></pre>

<p>JS</p>

<pre><code>// event listener for modals

$("button").on('click', function() {
    for ( i=0; i&lt;this.attributes.length ;i++ ) {                     //  this - identifies the modal sought
        if ( this.attributes[i].name === "data-target" ) {
            var target = this.attributes[i].value;                  //  get the modal to "fire" (data-target attribute)
        };
    };
    modalId = "modals/"+target.substring(1, target.length)+".html";                        //  strip the '#' from target
    $("#activeModal").empty();                                                     //  remove any previous modal information
    includeHTML = '&lt;!--#include virtual="'+modalId+'" --&gt;';         //  include via ssi (server side include)
    $("#activeModal").append(includeHTML);                             //  append the 'import' html
    $(target).modal("show");                                                        //  show the modal
});
</code></pre>

<p>I am expecting the html for any of about 20 modals to appear in the activeModal <code>&lt;section&gt;</code> of <code>index.html</code>. Then, I have the problem of making them "fire".</p>