Question

我正在使用bootstrap3来加载多个外部模态。当我在不同的模态之间切换时，我会遇到最后一个模态的内容。我遇到的另一个问题是，在加载第一个模态后出于某种原因，close按钮被取消激活

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="contact/contact.html" data-isloaded="false"
data-remote-target="#myModal">CONTACT</a>

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="faq/faq.html" data-isloaded="false"
data-remote-target="#myModal">FAQ</a>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$(function() {
$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (!$this.data('isloaded')) {
        if(remote) {
            $($this.data('remote-target')).load(remote);
            $this.data('isloaded', true)
        }
    }
});
});

我尝试过使用不同的id tags并且工作正常，但最后我加载了modal divs。有没有办法对多个div使用相同的modals？任何人吗？

这是一个FIDDLE根本不加载模态:(

干杯

Answer 1

正确的模式应该包含modal-header，modal-title，modal-body和modal-footer以及关闭按钮的附带元素。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header"> <!-- bootstrap class for header in modal -->
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- bootstrap close button in modal header -->
        <h4 class="modal-title"></h4> <!-- bootstrap class modal title -->
      </div>
      <div class="modal-body"> <!-- bootstrap class for modal content -->

      </div>
      <div class="modal-footer"> <!-- bootstrap class for footer and close button in modal -->
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cleanupTheModal()">Close</button>
      </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是一个更新的小提琴。虽然没有使用您所描述的方法，但这为“不同”模式加载不同内容提供了额外的选项。

http://jsfiddle.net/wGkLT/2/

多个外部模态问题 - Bootstrap 3

1 个答案: