引导模态不显示(Bootstrap modal not displaying)

我复制并粘贴从Twitter的引导示例代码来创建我的Rails应用程序3.2基本模式窗口：

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

它不工作。 这是不是因为jQuery或脚本不加载因为：a）因为使用数据的目标它不需要加载任何JS和b）我检查控制台，一切都完美的发射。

这也是不是因为我既包括boostrap.js和引导，modal.js ......我检查，我不是。

我不知所措。 它应该只是工作。 其他引导JS是在网站上正常工作。

我能想到的唯一的事情是它的东西做的类的定义.hide和.fade - 当我带他们出去，模态显示了罚款。 当我有他们，也不会显示在所有。

可以jQuery UI的是干扰它？

请问我任何进一步的信息，你可能需要帮我...

更新：

所以我觉得我看到了问题，但我不知道如何解决它。 当我检查的控制台上，在上面我看到

element.style {
display: none;
}

在某种程度上，现在的DIV的一部分，所以在控制台中，它看起来是这样的：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

但我不知道为什么它在加入它，或者从哪里。 如何追踪下来？

谢谢

Answer 1:

如果您已经从引导2.3.2升级来引导3，那么你就需要从你的任何模式的div去掉“隐藏”类;

Answer 2:

我找到了原因。

只要把它给任何人来对这个问题的一般用途。 如果你不能弄清楚什么是错的，尝试做一个“搜索所有”在应用程序中的任何样式表'模式“褪色”“淡入”和“隐藏”的任何类。

我有“褪色”的单个实例在随机的CSS文件中定义，这就是被停止它显示，因为它是压倒一切的引导。 一旦我删除了参考，一切正常。

Answer 3:

改变你的代码要这样的事情，

 <!-- Modal --> <div id="myModal" class="modal fade" 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">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a> 

并尝试使用数据目标=“＃ModelId”一次。 也许这是可能造成。

第二，如果你已经包括JQuery的一个以上的时间，将其删除并一度只包含它。 它还可以防止模型的时候。

Answer 4:

我有我的模式的<div>我的<LI>内....也不好。

外面工作正常:-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>

Answer 5:

如果您使用的角度，试图创建中有一个自定义模式的指令，该模式的背景下，会显示，但自己不会，除非你设置的模式取代：真正对你的指令。

打字稿指令：

export class myModalDirective implements ng.IDirective {
    static Register = () => {
        angular.module('app').directive('myModal', () => { return new myModalDirective () });
    }
    templateUrl = 'mymodal.html'    
restrict = 'E';
    replace = true;
    scope = {
        show: '='
    }
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        var vm = this;
        scope.$watch(function () { return scope.show; }, function (vis) {
            if (vis) {
                $(element).modal('show');
            } else {
                $(element).modal('hide');
            }
        });

    }
    constructor () {
    }
}

HTML模式

<div class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
        </div>
    </div>
</div>

Answer 6:

我有同样的问题，我意识到，我的<button>有一个type="submit"时，自举说，它必须是type="button"

Answer 7:

正如保，我有同样的问题，我的语气中没有显示，我意识到，我的按钮是在一个“<FORM>”标签...：

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

我刚刚更换<按钮>按<一>，和我的模式运作良好

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>

Answer 8:

遇到此之后，我惊讶地发现，这些解决方案的工作，因为它似乎相当直截了当和我有类似的标记不同的网页上正常运行。

随着我的配置，我必须绑定到相同的选择触发模式存在的jQuery代码。 一旦开始淘汰的过程中，我所要做的就是评论/删除e.stopPropagation()我现有的脚本中。

Answer 9:

为了呼吁.modal时，让我的模式来显示（“显示”）

我变了：

modal.on('loaded.bs.modal', function() 

至：

modal.on('shown.bs.modal', function() {

Answer 10:

只是为了阐述@jfdimark答案。 这是最有可能会由于相同的CSS类名某处加载CSS。 因此，与其定义模式类为“模态变脸”，将其更改为“模态变脸”，然后再试一次。

Answer 11:

我只是碰到这个问题，发现自定义CSS样式表文本颜色：#FFFFFF被淹没的文本内容，因为模型的背景颜色是一样的！ 即.MODEL内容{背景颜色：#FFFFFF;}确保通过添加以下.modal内容来覆盖它在您的自定义样式表{颜色：＃646464重要;}
可能这会有所帮助。

Answer 12:

你应该导入jQuery和bootstrap.min.js。

这种添加到角CLI：

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"]

请确保您有它的文件夹。

文章来源: Bootstrap modal not displaying