Bootstrap模态打开错了一个

Question

在我的页面中，我有两个模式：

<div id="modal1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">My title 1</h4>
      </div>
      <div class="modal-body">
        My content 1
      </div>
      <div class="modal-footer">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="modal2" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">My title 2</h4>
      </div>
      <div class="modal-body">
        My content 2
      </div>
      <div class="modal-footer">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我用

打开它们

$('#modal1').modal('show');
$('#modal2').modal('show');

在我需要的时候。

问题是无论modalid是什么，第一个模式总是打开的。我试着把

$('.modal').on('hidden', function(){
    $(this).data('modal', null);
});

在我的代码中，但没有任何改变。

（我从不同时显示这两个模态框。）

我正在使用 Backbonejs：我在单击按钮时打开 modal2，如下所示：

module.exports = Backbone.View.extend({

events : {
    'click #my_button' : 'show_modal_2'
},

initialize: function(){
    this.render();
},

render: function(){
    var template = my_template; 
    this.$el.html( template );
    $('#modal1').modal('show');
},
show_modal_2 : function(){
    $('#modal2').modal('show');
}

});

当页面加载到 render.

时打开模态编号 1

modal1完美打开，modal2打开modal1打开

Answer 1

我发现我做错了什么。

在我的代码中，我像这样动态构建 modal-body：

$('.modal-body').html(my_html);

问题是我正在像这样更改两个模态，所以 modal2 看起来像 modal1。我通过这样做解决了：

$('#modal1 .modal-body').html(my_html);

Bootstrap模态打开错了一个

Bootstrap modal opens wrong one

jquery

backbone.js

twitter-bootstrap

bootstrap-modal