title: W3 Modal opens and closes immediately
body: <p>I've noticed some odd behaviour with the W3.css modal class. After hours and hours of searching and attempting to debug, i discovered that using the "base" tag in a css file will cause W3 modal boxes to open and then close immediately, and then redirect to the directory defined in the "base" tag. Seems very odd to me.</p>
  
  <p>I haven't been able to discover WHY this is happening, or to find a sensible work around other than omitting the "base" tag.</p>
  
  <p>I did try defining the "base" with and without the "https:". The only difference this made was that WITH the "https:" the modals would open, but the browser gave an "INSECURE WEBSITE..." warning, and attempted to block (and the modals would open, albeit with blocked content). WITHOUT the "https:" the modals would open but then close immediately and redirect to the "base" dir.</p>
  
  <p>I would like to stress that i am not using bootstrap or any other way of opening the modals - it is purely W3 classes (but obviously using javascript within the modal to get.ElementById etc).</p>
  
  <p>Has anyone else come across this? Has anyone managed to find a sensible workaround?</p>
  
  <p>Here's the css tag:</p>
  
  <pre><code>&lt;base href="//www.&lt;subdomain&gt;.&lt;domain&gt;" /&gt;
  </code></pre>
  
  <p>Here's the calling code:</p>
  
  <pre><code>&lt;div class="w3-container"&gt;
      &lt;a href="#"   onclick="document.getElementById('example-modal').style.display='inline'"&gt;
         &lt;span class="ca-icon"&gt;$&lt;/span&gt;
         &lt;div class="ca-content"&gt;
             &lt;h2 class="ca-main"&gt;Example&lt;/h2&gt;
         &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the modal definition:</p>
  
  <pre><code>&lt;div id="example-modal" class="w3-modal"&gt;
     &lt;div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px"&gt;
        &lt;h2&gt;EXAMPLE MODAL BOX...&lt;/h2&gt;  
        &lt;div class="w3-center"&gt;&lt;br&gt;
           &lt;span onclick="document.getElementById('example-modal').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal"&gt;x&lt;/span&gt;
           &lt;i class="fa fa-spinner fa-spin" style="font-size:64px"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;form class="w3-container" action="" &gt;
           &lt;div class="w3-section"&gt;
              ...some text here.
           &lt;/div&gt;
        &lt;/form&gt;
        &lt;div class="w3-container w3-border-top w3-padding-16 w3-light-grey" align="center"&gt;
           &lt;button onclick="document.getElementById('example-modal').style.display='none'" type="button" class="w3-btn w3-red"&gt;OK&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>