Question

是否有多种模态可供选择。我需要多个模态实例。

当点击主页面中的“打开模态”时，打开一个模态（Modal-A），这是一个表单，并在Modal-A上链接以打开另一个模态（Modal-B）。

Modal-B也将是一个表格，当Modal-B关闭时，Modal-A中的某些值需要更新，当Modal-A关闭时，主页面需要更新。

任何完成任务的工作，我都无法获得多重模态工作。

我正在使用BS3

Answer 1

Bootply ：http://www.bootply.com/svYtb33XTs

我解释：

打开模态，打开第二个模态，在输入中键入内容，关闭模态（交叉或取消，我没有编码保存更改），第一个模态的按钮更新...

<强> JS

$('#myModal1').on('hide.bs.modal', function(){
    $('a').html(  $('#myModal1 input').val()        );
});

HTML ：

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal fade" 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">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…
      <a href="#myModal1" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>      
      </p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>


<div id="myModal1" class="modal fade" 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">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>Type something here and close modal.... (cancel or close)</p>
      <input>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>

堆叠模态或一些其他替代jquery弹出模式

1 个答案: