Bootstrap Modal立即消失 [英] Bootstrap Modal immediately disappearing

问题描述

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

I'm working on a website using bootstrap.

基本上，我想在主页中使用一种模式，由英雄单位中的按钮召唤.

Basically, I wanted to use a modal in the home page, summoned by the button in the Hero Unit.

按钮代码:

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

问题在于，一旦我单击按钮，模态就会淡入，然后立即消失.

The problem is that as soon as I click on the button, the modal fades in and then immediately disappears.

我将不胜感激.

此外，如何更改下拉三角形的颜色(指向上方，没有悬停)?我正在一个基于橙色和棕色的网站上工作，那种蓝色的东西真的很烦人.

Also, how to change the dropdown triangle's color (pointing up, no hover)? I'm working on a website based on orange and brown and that blue thing is really annoying.

推荐答案

可能的原因

这是当Modal插件的JavaScript加载两次时的典型行为.请检查以确保该插件不会被双重加载.根据所使用的平台，模态代码可以从多个来源加载.一些常见的是:

A Likely Cause

This is typical behavior for when the JavaScript for the Modal plugin gets loaded twice. Please check to make sure that the plugin isn't getting double loaded. Depending on the platform you are using, the modal code could be loaded from a number a sources. Some of the common ones are:

• bootstrap.js (完整的BootStrap JS套件)
• bootstrap.min.js (与上面相同，只是缩小了)
• bootstrap-modal.js (独立插件)
• 依赖项加载程序，例如require('bootstrap')

• bootstrap.js (the full BootStrap JS suite)
• bootstrap.min.js (same as above, just minified)
• bootstrap-modal.js (the standalone plugin)
• a dependency loader, e.g., require('bootstrap')

一个好的开始是使用浏览器中的开发人员工具检查已注册的click事件侦听器.例如，Chrome将列出JS源文件，在该文件中可以找到注册侦听器的代码.另一种选择是尝试在页面上的源中搜索在模式代码中找到的词组，例如var Modal.

A good place to start is to inspect the registered click event listeners using the developer tools in your browser. Chrome, for instance, will list the JS source file where the code to register the listener can be found. Another option is to try searching the sources on the page for a phrase found in the Modal code, e.g., var Modal.

不幸的是，这些方法并不能在所有情况下都能找到.检查网络请求可以使您更清楚地了解页面上加载的所有内容.

Unfortunately, these won't always find things in all cases. Inspecting the network requests can be a little more robust at giving you a picture of everything loaded on a page.

以下是演示同时加载 bootstrap.js 和 bootstrap-modal.js 时发生的情况(只是为了确认您的体验):

Here's a demo of what happens when you load both the bootstrap.js and bootstrap-modal.js (just to confirm your experience):

如果您向下滚动到该页面的源底部，则可以删除或注释 bootstrap-modal.js 的<script>行，然后确认现在该模式将功能正常.

If you scroll down to the bottom of the source on that page, you can remove or comment out the <script> line for the bootstrap-modal.js and then verify that now the modal will function as expected.

这篇关于Bootstrap Modal立即消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！