关闭当前模态后，打开新模态（引导程序）

Question

我使用Bootstrap模态来显示pdf

我希望当用户关闭模式（通过单击关闭或在mdoal之外单击）时，将打开一个新的模式

要在模式上打开我的Pdf，请使用以下代码：

<a class="btn btn-primary show-pdf" title="exemple" href="./parcel.php">PDF</a>

<script type="text/javascript">

(function(a){a.twModalPDF=function(b){defaults={title:"Parcel",message:"Fail",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 1020px;overflow-y: auto;"':"";html='<div class="modal fade" id="oModalPDF">';html+='<div class="modal-dialog modal-lg">';html+='<div class="modal-content">';html+='<div class="modal-body" '+c+">";html+=b.message;html+="</div>";html+='<div class="modal-footer">';if(b.closeButton===true){html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>'}html+="</div>";html+="</div>";html+="</div>";html+="</div>";a("body").prepend(html);a("#oModalPDF").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery);


  $(function(){    
    $('.show-pdf').on('click',function(){
      var sUrl = $(this).attr('href');
      var sTitre = $(this).attr('title');
      var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
      $.twModalPDF({
        title:sTitre,
        message: sIframe,
        closeButton:true,
        scrollable:false
      });
      return false;
    });
  })

</script>

它运行良好，对于打开新模式，我有此功能，但是它们不起作用...

<div class="modal fade" id="Finish" 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">Attention</h4>
      </div>
      <div class="modal-body">
        ....
      </div>
      <div class="modal-footer">
        <div class="col-md-5">
          <button type="button" class="btn btn-success btn-lg col-xs-12 margin-bottom" data-dismiss="modal">No</button>
        </div>
        <div class="col-md-7">
          <form action="./forms/success.php" method="post">
            <button type="submit" name="saveDispatching" value="1" class="btn btn-lg btn-default col-xs-12">Yes</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    $('.modal').click(function(e){
        e.preventDefault();

        $('#oModalPDF')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#Finish').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });
</script>

我该怎么办？ 谢谢您的帮助

Answer 1

我认为您应该在隐藏模式之前监听hidden.bs.modal事件。 现在，您要隐藏模式，然后开始侦听隐藏的事件，因为该事件已被隐藏，因此不会被触发。

$('.modal').click(function(e){
    e.preventDefault();

    $('#oModalPDF')            
        .on('hidden.bs.modal', function (e) {
            $('#Finish').modal('show');

            $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
        })
        .modal('hide');

});

我不知道您是否要制作动画，但如果没有，您甚至都不必听一个事件，您可以简单地隐藏模式并在单击时打开一个新的模式：

$('.modal').click(function(e){
    e.preventDefault();

    $('#oModalPDF').modal('hide');

    $('#Finish').modal('show');
});

Answer 2

尝试这样组织代码：

$(function(){    
  $('.show-pdf').on('click',function(){
  var sUrl = $(this).attr('href');
  var sTitre = $(this).attr('title');
  var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
  $.twModalPDF({
    title:sTitre,
    message: sIframe,
    closeButton:true,
    scrollable:false
  });

  $('#oModalPDF').on('hidden.bs.modal', function (e) {
    console.log('e', e);

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

    $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
  });

  return false;


});

我的JSFiddle 示例

UPDATE

如果使用PHP解决处理程序脚本标记，则可以尝试这种方法。

在模态初始化中，您仍然有$('#oModalPDF').on('hidden.bs.modal', ... )处理程序，但是您还有：

window.dialogOnCloseHandler = null;

在关闭事件后存储您的Callack。 在全局范围内存储内容是一种错误的模式 。 因此，您应该为您的案例重构该回调存储。

$(document).ready(function(){  

window.dialogOnCloseHandler = null;

$('.show-pdf').on('click',function(e){
  e.preventDefault();
  var sUrl = $(this).attr('href');
  var sTitre = $(this).attr('title');
  var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
  $.twModalPDF({
    title:sTitre,
    message: sIframe,
    closeButton:true,
    scrollable:false
  });

 $('#oModalPDF').on('hidden.bs.modal', window.dialogOnCloseHandler);

});

}）

关闭后事件回调脚本：

 $(document).ready(function(){

   window.dialogOnCloseHandler = function (e) {
      console.log('e', e);

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

      $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
  };

}）;

在这里，您只需使用处理程序更新window.dialogOnCloseHandler属性。

JSFiddle 示例

Answer 3

我还没有完全测试过，但是我相信您不需要添加代码

$('#oModalPDF').modal('hide').on('hidden.bs.modal', function (e) {
    $('#Finish').modal('show');
    $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
});

在您编写的$('.modal').click事件中。

$('#modalID1')    //the modal id which upon closing triggers the next modal
    .on('hidden.bs.modal'){
        $('#Finish').modal('show');
    }

这样做的目的是，一旦前一个模态关闭，它将触发下一个模态的show事件。