W3 Modal öffnet und schließt sofort

Question

Ich habe ein seltsames Verhalten mit der modalen Klasse W3.css bemerkt. Nach stundenlangem Suchen und Versuchen zu debuggen, entdeckte ich, dass die Verwendung des "base" -Tags in einer css-Datei dazu führt, dass sich modale W3-Boxen öffnen und dann sofort schließen und dann zu dem im "base" -Tag definierten Verzeichnis umleiten. Scheint sehr merkwürdig für mich.

Ich konnte nicht herausfinden, WARUM dies geschieht, oder um eine sinnvolle Arbeit zu finden, außer das "Basis" -Tag wegzulassen.

Ich habe versucht, die "Basis" mit und ohne die "https:" zu definieren. Der einzige Unterschied dabei war, dass mit den "https:" die Modals geöffnet wurden, aber der Browser gab eine "INSECURE WEBSITE ..." Warnung und versuchte zu blockieren (und die Modale würden sich öffnen, wenn auch mit blockiertem Inhalt). OHNE die "https:" würden sich die Modals öffnen, aber dann sofort schließen und zum "Basis" dir umleiten.

Ich möchte betonen, dass ich nicht Bootstrap oder eine andere Art der Öffnung der Modale verwenden - es ist reine W3-Klassen (aber offensichtlich mit Javascript innerhalb der Modalität zu bekommen. ElementById usw.).

Hat sonst noch jemand das gefunden? Hat es jemand geschafft, einen vernünftigen Workaround zu finden?

Hier ist das CSS-tag:

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

Hier ist die Telefonvorwahl:

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

Und hier ist die modale 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> 

Answer 1

ich das gleiche Problem aufwies, wurde es war aufgrund der Modalität in einem Formular, so, wenn Sie die <button> geklickt hat eingereicht die Seite und damit Clearing das Modal. Changed zu und es behob das Problem.

Ich habe diese:

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

Statt dessen:

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