引导模式未显示答案

【问题标题】：bootstrap modal not showing引导模式未显示
【发布时间】：2014-06-10 16:17:25
【问题描述】：

我们目前被困在使用 bootstrap 2.3.2，并且正在寻求用 bootstrap 的模态替换我们当前的对话框。

我已经找到了所有需要实例化模态的视图，并尝试了 2 种方法来调用它们，但均未成功。

用JS：

HTML：

<a title='New Group' class='btn btn-fancy' id="btn-new-group" data-bind="visible: Value() == 'CanCreateNewGroup', click: corp.page.CreateGroupDialog.show">New Group<i class="fa fa-fw fa-lg fa-users"></i></a>

JS：

define([
'app-utils',
'jquery',
'bootstrap'
], function (utils) {

var CreateGroupDialog = function () {
};

CreateGroupDialog.prototype = $.extend(true, CreateGroupDialog.prototype, {

    show: function (model) {
        var dialog = $('#testing-bootstrap').modal({
            toggle: true,
            show: true,
            keyboard: true
        });
    }
});

return CreateGroupDialog;
});

没有 JS：

HTML：

<a data-target="#testing-bootstrap" data-toggle="modal" class="btn btn-simple show_tooltip" title="Create Group"><i class="fa fa-fw fa-plus-circle"></i><span>Create Group</span></a>

我必须来这里的原因是我没有控制台错误，没有线索。我的示例中的 JS 被击中，引导程序被包含在内，我已经通过引导程序代码，它正在加载我的模态的 html，但它没有以任何方式出现在屏幕上，没有控制台错误。

实际的模态标记（来自引导程序的示例）

    <div id="testing-bootstrap" 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>

谢谢大家。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

我不完全确定绑定在您的示例中是如何工作的 - 它似乎使用了 Knockout data-bind 属性，但其余的是 jQuery。我猜您的 CreateGroupDialog 没有正确绑定到模态 HTML - 特别是因为您使用的是 require.js。如果没有 JS 的 HTML 也不起作用，可能还有其他问题，但我会修改您的构造函数代码以绑定到应该触发模式的 <a>。

var CreateGroupDialog = function () {
    $( 'a[title="Create Group"]' ).click( $.proxy( this.show, this ) );
};

然后实例化它：

var modal = new CreateGroupDialog;

【讨论】：

【解决方案2】：

此问题描述区域中的可疑 html 是 HTML 部分的一部分，该部分在应用程序的一个区域中被调用，当时不可见。

如果您使用的是 html 部分，请在怀疑引导模式之前查看它们的可见性。那是我的问题。

【讨论】：