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

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

我很感激你的帮助。

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


当前回答

以防任何人使用codeigniter 3引导数据表。

下面是我在config/ci_boostrap.php中的修复

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

其他回答

我也有这个问题,如果按钮是在一个标签内,然后模态出现一次,很快就消失了,把按钮从形式固定的问题。谢谢我在这个帖子结束!+1到所有。

如果使用jquery两次附加事件监听器,也会出现这个问题。 例如,你可以在不解除绑定的情况下设置:

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

如果发生这种情况,事件将连续触发两次,模态将消失。

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

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

在我的例子中,单击按钮会导致页面重新加载(不希望)。

以下是我的解决方案:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

一个可能的原因

这是用于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>行,然后验证现在模式将按预期运行。

我知道这是旧的,但这里还有另一件事要检查—确保您只有一个data-target=属性。我复制了它,结果是按照这个线程。