我正在用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>

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

我很感激你的帮助。

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


当前回答

我在我的mvc应用程序中寻找了一个重复的引导参考,在这个问题上的其他有用的答案之后。

终于找到了——它包含在我正在使用的另一个库中,所以一点也不明显!(datatables.net)。

如果您仍然遇到这个问题,请寻找其他可能为您包含引导的库。(datatables.net允许您指定有或没有引导的下载-其他人也这样做)。

所以我从我的包中删除了bootstrap.min.js。配置和所有工作都很好。

其他回答

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

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

又是一个原因/解决方案!我在JS代码中有:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

但是我的HTML代码已经写成了:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

这是复制输入代码并导致模态打开然后关闭的另一种排列方式。在我的例子中,数据目标和数据切换在html按照引导文档已经触发模式工作。因此,JS代码是冗余的,当删除它时,它可以工作。

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

<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"> 希望这对你有用。

一个可能的原因

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

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

调试技巧

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

不幸的是,这些并不总是能在所有情况下找到东西。检查网络请求可以让您了解页面上加载的所有内容。

一个(破碎的)演示

下面是加载bootstrap.js和bootstrap-modal.js时发生的事情的演示(只是为了确认你的经验):

砰砰作响

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

在我的例子中,我在application.html.erb的头部包含了CDN,还安装了'jquery-rails' gem,我猜这是多余的,感谢上面的文档和帖子。

我简单地从application.html.erb的头部注释掉了CDN(如下所示),并且模式适当地保持打开。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->