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模式打开错误的

1 个答案: