Question

我正在使用boostrap最新版本，最终获得它的悬念并尝试添加另一个模态与我已经拥有的模式相结合。好吧，没有运气，卡住了。有没有办法添加另一个与前一个模态一起工作的模态？

为什么我想尝试在那里获得另一个模态以展示抽搐的表情以及他们可以用来使用户更容易的命令。

换句话说，右侧的另一个框（标有红色框的地方）

屏幕截图：http://i.stack.imgur.com/bJduj.png

Answer 1

可以为同一data-target设置class，而不是href使用ID。你必须根据你想要的两个位置以及它们的大小等来调整它们的位置。

将示例打开到整页，您会看到。

data-target=".myModals"

#myModal2 {
  top: 40%;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a data-toggle="modal" data-target=".myModals" class="btn btn-primary btn-lg">Launch Modals</a>

<div class="modal fade myModals" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade myModals" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title 2</h4>

      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 2

您可以通过JavaScript打开模态。由于你已经加载了jQuery，尝试这样的事情。

假设您有一个ID为videoFeed和textFeed的模态。

$( "#" ).bind( "click", function() {
    $('#videoFeed').modal('toggle');
    $('#textFeed').modal('toggle');
});

关于Modal BootStrap的建议

2 个答案: