Question

我们目前使用bootstrap 2.3.2，并希望用bootstrap的模态替换当前的对话框。

我找到了需要实例化模态的所有视图，并尝试了两种方法来调用它们而没有成功。

使用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被击中，包含bootstrap并且我已经逐步完成了引导程序代码并且它正在加载我的模态的html，但是它没有以任何方式出现在屏幕上，没有控制台错误。

实际模态标记（来自bootstrap＆＃39;示例）

    <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>

谢谢大家。

Answer 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;

Answer 2

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

如果你正在使用html partials，那么在怀疑bootstrap模态之前先查看它们的可见性。那是我的问题。

bootstrap模态没有显示

2 个答案: