html - W3 Modal 立即打开和关闭

Question

我注意到 W3.css 模式类有一些奇怪的行为。经过数小时的搜索和尝试调试，我发现在 css 文件中使用“base”标签会导致 W3 模式框打开然后立即关闭，然后重定向到“base”标签中定义的目录。我觉得很奇怪。

我无法发现为什么会发生这种情况，也无法找到除了省略“base”标签之外的合理解决方法。

我确实尝试过使用和不使用“https:”来定义“基础”。唯一的区别是使用“https:”模式会打开，但浏览器会发出“不安全的网站...”警告，并试图阻止(并且模式会打开，尽管内容被阻止)。如果没有“https:”，模式将打开但随后立即关闭并重定向到“基本”目录。

我想强调的是，我没有使用 Bootstrap 或任何其他打开模式的方式 - 它纯粹是 W3 类(但显然在模式中使用 javascript 来获取 get.ElementById 等)。

有没有人遇到过这个？有没有人设法找到一个明智的解决方法？

这是 css 标签:

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

调用代码如下:

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

这是模态定义:

<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

我遇到了同样的问题，这是由于模态框位于表单中，所以当您单击 <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>