Bootstrap:与两个模态交互

时间:2015-11-11 08:24:09

标签: twitter-bootstrap bootstrap-modal

我有一个模态,我们称之为模态A,它有一个按钮。单击此按钮时,它会打开另一个模态,模态B.现在模态B中有一些内容需要复制到模态A,而不关闭模态B将数据粘贴到模态A的文本框中。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalA">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="modalA" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <a href="#" onclick="return false;" data-toggle="modal" data-target="#modalB">Help</a>
<textarea id="PASTEHERE" class="form-control input-sm" row="5"></textarea>
  </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>
 </div>
 </div>

<!-- Modal -->
<div class="modal fade" id="modalB" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
   <p>SOME TEXT TO COPY</p>
  </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>
 </div>
 </div>

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery来执行此操作:

$("#modalA #PASTEHERE").val($("#modalB .modal-body p").html());