两个不同的 Bootstrap 模态窗口...同时打开

Question

我发现了几个类似的问题，但似乎没有一个能完全给出我需要的答案。我有一个需要两个不同模式窗口的页面。一个通过单击 8 个按钮中的任何一个来打开（无论您单击哪个，模式内容都是相同的），而另一个是一个简单的“联系信息”模式，在单击标准文本链接时打开。问题在于，使用此代码，无论您单击哪个按钮/链接，两个模态窗口都会同时打开，一个在另一个之上。我需要它们单独打开，彼此独立。

这是脚本：

      <!--***********
MODAL WINDOW - SELECT TEMPLATE POPUP
 ***********-->
  <script>$('.selectLink').click(function() {
    $('.modal')
        .prop('class', 'modal fade') // revert to default
        .addClass( $(this).data('direction') );
    $('.modal').modal('show');
});</script>
<!--***********
MODAL WINDOW - SELECT TEMPLATE POPUP
 ***********-->

  <!--***********
MODAL WINDOW - HELP POPUP
 ***********-->
  <script>$('#helpLink').click(function() {
    $('.modal')
        .prop('class', 'modal fade') // revert to default
        .addClass( $(this).data('direction') );
    $('.modal').modal('show');
});</script>
<!--***********
MODAL WINDOW - HELP POPUP
 ***********-->

和 HTML：

<!-- MODAL WINDOW - SELECT TEMPLATE POPUP -->                  
    <div class="modal fade" class="selectLink" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h2 class="modal-title">Customize Your Email!</h4>
          </div>
  <div class="modal-body">
        ...
 </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->       
<!-- MODAL WINDOW - SELECT TEMPLATE POPUP --> 


        <!-- MODAL WINDOW - HELP POPUP   -->                
    <div id="helpLink" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h2 class="modal-title">Contact Us for Assistance</h4>
          </div>
  <div class="modal-body">
        ...          
 </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->       
<!-- MODAL WINDOW - HELP POPUP -->  

我认为问题可能是我在“selectLink”模态中使用了一个类而不是一个 id，但在我添加第二个模态（带有 id）之前，它工作得很好。我对 jquery 了解不多，所以也许我在该部分中遗漏了一些东西。

我查看了几个关于 SO 的问题，但没有一个给出必要的答案。

Answer 1

你的问题是这行JS：

$('.modal').modal('show');

它是说“在类modal的所有元素上调用modal('show')函数”它应该通过id引用特定的模态，像这样：

$('#helpLink').modal('show');

或者

$('#selectLink').modal('show');