Bootstrap Modal立即消失

我正在用bootstrap做一个网站。

基本上，我想在主页中使用一个模态，通过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>

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

我很感激你的帮助。

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

当前回答

不得不面对同样的问题。原因和@merv一样。问题是添加到页面的日历组件。组件本身添加了在日历弹出框中使用的模态特性。

因此，打破模型弹出窗口的原因将是以下一个或多个

加载多个bootstrap js版本/文件(缩小…) 将外部日历添加到使用引导的页面向页面添加自定义警报或弹出库添加弹出行为的任何其他库

2018-08-03 07:59:33

其他回答

今天我自己也遇到了这个问题，而且碰巧只是在Chrome上。是什么让我意识到这可能是一个渲染问题。移动特定的模式到它自己的渲染层解决了这个问题。

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

2015-07-14 08:38:00

我在移动设备上测试时也遇到过同样的问题，这个技巧对我来说很管用

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a>

将按钮更改为锚定标签应该可以工作，问题是由于它的类型按钮，因为它试图提交，所以模式立即消失。并且也从模态中移除隐藏隐藏淡出给予 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labledby ="myModalLabel" aria-hidden="true"> 希望这对你有用。

2015-03-04 12:47:21

我有同样的问题，因为我切换了我的模式两次，如下所示:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

我删除了一个出现项:

(“# myErrorModal美元)。“充气”(资本)

它像魔法一样起作用!

2020-02-25 08:28:46

我已经通过bower添加了bootstrap到我的项目中，然后我导入了bootstrap.min.js文件，然后导入了modal.js文件。(打开模式的按钮在表单内部)。我只是删除了modal.js的导入，它为我工作。

2018-01-28 17:20:54

我在asp.NET项目中遇到了同样的问题。我使用bootstrap 3.1.0解决了它降级到bootstrap 2.3.2。

2014-05-19 01:20:36

Bootstrap Modal立即消失

推荐文章

最新文章

标签