W3モーダルがすぐに開き、閉じます

Question

私はW3.cssモーダルクラスで何らかの奇妙な振る舞いに気付きました。何時間も何時間も検索してデバッグしようとすると、CSSファイルの "base"タグを使用するとW3モーダルボックスが開き、すぐに閉じて "base"タグで定義されたディレクトリにリダイレクトされることがわかりました。私には非常に奇妙に見えます。

私はこれがなぜ起こっているのかを知ることができず、 "ベース"タグを省略すること以外にも賢明な解決策を見つけることができませんでした。

「https：」の有無にかかわらず「ベース」を定義しようとしました。これは唯一の違いは、 "https："でモーダルが開き、ブラウザが "INS WEURE WEBSITE ..."という警告を出し、ブロックしようとした（そしてブロックされたコンテンツではあるがモーダルが開く）ということでした。 "https："がなくてもモーダルは開きますが、すぐに閉じて "ベース"ディレクトリにリダイレクトします。

私はブートストラップや他の方法でモーダルを開いていないことを強調したいと思います。これは純粋にW3クラスです（しかし、明らかにgetalのget.ElementByIdなどのjavascriptを使用しています）。

他に誰かがこれを見つけましたか？誰も賢明な回避策を見つけることができましたか？ここで

は、CSSタグです：

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

ここでは、呼び出し元のコードは次のとおりです。私は、それを同じ問題を抱えていた

<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

：

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

そしてここでは、モーダル定義ですモーダルがフォーム内にあるため、<button>をクリックしたときにページが送信されたため、クリアされましたモーダル に変更して問題を解決しました。これに代えて

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

：

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

は、私はこれを使用しました