小编典典

Bootstrap Modal 立即消失

all

我正在使用引导程序在网站上工作。

基本上,我想在主页中使用一个模式,由英雄单元中的按钮召唤。

按钮代码:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

模式代码:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">脳</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

问题是,只要我单击按钮,模式就会淡入,然后立即消失。

我会很感激任何帮助。

另外,如何更改下拉三角形的颜色(指向上方,不悬停)?我正在开发一个基于橙色和棕色的网站,蓝色的东西真的很烦人。


阅读 65

收藏
2022-06-15

共1个答案

小编典典

一个可能的原因

这是 Modal 插件的 JavaScript
被加载两次时的典型行为。请检查以确保插件没有被双重加载。根据您使用的平台,可以从多个来源加载模态代码。一些常见的有:

  • bootstrap.js (完整的 BootStrap JS 套件)
  • bootstrap.min.js (同上,只是缩小了)
  • bootstrap-modal.js (独立插件)
  • 一个依赖加载器,例如,require('bootstrap')

调试技巧

一个好的起点是click使用浏览器中的开发人员工具检查已注册的事件侦听器。例如,Chrome 会列出可以找到注册监听器代码的 JS
源文件。另一种选择是尝试在页面上的资源中搜索模态代码中找到的短语,例如var Modal.

不幸的是,这些并不总是在所有情况下都能找到东西。检查网络请求可以更可靠地为您提供页面上加载的所有内容的图片。

一个(损坏的)演示

这是加载 bootstrap.jsbootstrap-modal.js 时发生的演示(只是为了确认您的经验):

普朗克

如果您向下滚动到该页面上源代码的底部,您可以删除或注释掉 bootstrap-
modal.js*<script>的行,然后验证现在模态将按预期运行。
*

2022-06-15