2014-06-10 190 views
0

我们目前使用bootstrap 2.3.2卡住了,并且正在试图用bootstrap的模块替换当前的对话框。bootstrap modal没有显示

我找到了所有需要实例化和试图使用两种方式来调用它们而没有成功的方式的视图。

随着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被包含,并且我已经加入了引导代码,它正在加载我的modal的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> 

谢谢大家。

回答

0

我不完全确定绑定在你的例子中是如何工作的 - 它似乎使用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; 
0

在这一问题的说明区域的怀疑HTML是一种HTML部分这是被称为应用程序的区域的一部分,这不是将要然后可见。

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