twitter-bootstrap Bootstrap Modal 立即消失

Bootstrap Modal immediately disappearing

提问by gorokizu

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

按钮代码：

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

Modal code:

模态代码：

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

问题是，只要我点击按钮，模态就会淡入，然后立即消失。

I'd appreciate any help.

我很感激任何帮助。

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.

另外，如何更改下拉三角形的颜色（指向上，无悬停）？我正在一个基于橙色和棕色的网站上工作，那个蓝色的东西真的很烦人。

回答by merv

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:

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

• 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')

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

Debugging Tips

调试技巧

A good place to start is to inspect the registered clickevent 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.

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

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

A (Broken) Demo

一个（损坏的）演示

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

这是加载bootstrap.js和bootstrap-modal.js时发生的情况的演示（只是为了确认您的体验）：

Plunker

普朗克

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.jsand then verify that now the modal will function as expected.

如果向下滚动到页面的源的底部，你可以删除或注释掉<script>的行引导，modal.js，然后验证，现在的模式将作为预期。

回答by Rory Hunter

I had the same problem but it had a different cause. I followed the documentation and created a button like so:

我有同样的问题，但它有不同的原因。我按照文档创建了一个按钮，如下所示：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

When I clicked it, it appeared that nothing would happen. However, the button was in a <form>that was temporarily just fetching the same page.

当我点击它时，似乎什么都不会发生。但是，该按钮位于<form>临时只是获取同一页面的 a 中。

I fixed this by adding type="button"to the button element, so that it wouldn't submit the form when clicked.

我通过添加type="button"到按钮元素来解决这个问题，这样它在点击时就不会提交表单。

回答by miCRoSCoPiC_eaRthLinG

For me what worked was to remove

对我来说，有效的是去除

data-toggle="modal"

from the button. The button itself can be any element - a link, div, button etc.

从按钮。按钮本身可以是任何元素 - 链接、div、按钮等。

回答by John Lucas

I looked for a while for a duplicate bootstrap reference in my mvc app, after the other helpful answers on this question.

在此问题的其他有用答案之后，我在我的 mvc 应用程序中寻找了一段时间的重复引导程序参考。

Finally found it - it was included in another library I was using, so wasn't obvious at all! (datatables.net).

终于找到了 - 它包含在我正在使用的另一个库中，所以根本不明显！( datatables.net).

If you still get this problem, look for other libraries that might be including bootstrap for you. (datatables.netallows you to specify a download with or without bootstrap - others do the same).

如果您仍然遇到此问题，请查找可能为您包含引导程序的其他库。（datatables.net允许您指定使用或不使用引导程序的下载 - 其他人也这样做）。

So I removed the bootstrap.min.jsfrom my bundle.configand all worked fine.

所以我bootstrap.min.js从我的中删除了bundle.config，一切正常。

回答by Giuseppe

Same symptom, in the context of a Rails application with Bootstrap provided by the bootstrap-sassgem, and @merv's answer put me on the right track.

同样的症状，在使用bootstrap-sassgem提供的 Bootstrap 的 Rails 应用程序的上下文中，@merv 的回答让我走上了正确的轨道。

My application.jsfile had the following:

我的application.js文件有以下内容：

//= require bootstrap
//= require bootstrap-sprockets

The fix was to remove one of the two lines. Indeed, the gem's readme warns you about this error. My bad.

解决方法是删除两行之一。实际上，gem 的自述文件会警告您有关此错误的信息。我的错。

回答by Ricardo Pieper

My code somehow had the bootstrap.min.js included twice. I removed one of them and everything works fine now.

我的代码以某种方式包含了 bootstrap.min.js 两次。我删除了其中一个，现在一切正常。

回答by gpasse

The problem can also occurs if using jquery you attach an event listener twice. For exemple you would set without unbinding :

如果使用 jquery 附加事件侦听器两次，也会出现此问题。例如，您无需解除绑定即可设置：

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

If this happens the event is fired twice in a row and the modal disapears.

如果发生这种情况，该事件将连续触发两次并且模式消失。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

See exemple : http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

参见示例：http: //embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

回答by LX-3

e.preventDefault();with jquery ui

e.preventDefault();使用 jquery ui

For me this problem occured with the click method override on a jquery ui button, causing a page reload on click by default.

对我来说，这个问题是在 jquery ui 按钮上的 click 方法覆盖时发生的，默认情况下会导致页面在单击时重新加载。

回答by JDev

I ran into the same symptom that @gpasse showed in his example. Here was my code...

我遇到了@gpasse 在他的示例中显示的相同症状。这是我的代码...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

As @Bhargav suggested, my issue was due to the button attempting to submit the form, and reloading the page. I changed the button to an <a>link as follows:

正如@Bhargav 所建议的，我的问题是由于按钮试图提交表单并重新加载页面。我将按钮更改为<a>链接，如下所示：

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

...and it fixed the problem.

...它解决了这个问题。

NOTE: I don't have enough reputation to simply add a comment or upvote yet, and I felt that I could add a little clarification.

注意：我还没有足够的声誉来简单地添加评论或点赞，我觉得我可以添加一些说明。

回答by Mekey Salaria

In my case, I had only a single bootstrap.js, jquery.js file included but still getting such type of error, and my code for button was something like this:

就我而言，我只有一个 bootstrap.js、jquery.js 文件，但仍然出现此类错误，我的按钮代码如下所示：

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

I simple added e.preventDefault();to it and it worked like charm.

我简单地添加了e.preventDefault(); 对它来说，它就像魅力一样。

So, my new code was like below:

所以，我的新代码如下：

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>