多个外部模态问题 - 引导程序 3

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？任何人？

这是一个根本不加载模态的小提琴:(

干杯

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/