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('show')类的所有元素上调用modal函数”它应该通过id引用特定的模态，如下所示：

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

或者

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

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

1 个答案: