1

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.

I haven't been able to discover WHY this is happening, or to find a sensible work around other than omitting the "base" tag.

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.

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).

Has anyone else come across this? Has anyone managed to find a sensible workaround?

Here's the css tag:

<base href="//www.<subdomain>.<domain>" />

Here's the calling code:

<div class="w3-container">
    <a href="#"   onclick="document.getElementById('example-modal').style.display='inline'">
       <span class="ca-icon">$</span>
       <div class="ca-content">
           <h2 class="ca-main">Example</h2>
       </div>
    </a>
</div>

And here is the modal definition:

<div id="example-modal" class="w3-modal">
   <div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px">
      <h2>EXAMPLE MODAL BOX...</h2>  
      <div class="w3-center"><br>
         <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">x</span>
         <i class="fa fa-spinner fa-spin" style="font-size:64px"></i>
      </div>
      <form class="w3-container" action="" >
         <div class="w3-section">
            ...some text here.
         </div>
      </form>
      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey" align="center">
         <button onclick="document.getElementById('example-modal').style.display='none'" type="button" class="w3-btn w3-red">OK</button>
      </div>
   </div>
</div>
M Hamza Javed
  • 1,269
  • 4
  • 17
  • 31
noowie
  • 49
  • 1
  • 1
  • 8

1 Answers1

1

I was having the same issue, it was due to the modal being within a form, so when you clicked the <button> it submitted the page, hence clearing the modal. Changed it to and it cured the issue.

I used this:

<span onclick=""document.getElementById('idembim').style.display='block'"" class=""w3-button w3-blue w3-small w3-padding-small"">Select Image</span>

Instead of this:

<button onclick=""document.getElementById('idembim').style.display='block'"" class=""w3-button w3-blue w3-small w3-padding-small"">Select Image</button>
Chunky
  • 21
  • 2