Open new modal after close current modal (bootstrap)

Question

I use a Bootstrap modal to display a pdf

I would like that when the user closes the modal (by clicking on close or clicking outside the mdoal) a new modal opens

For open my Pdf on modal I use this code :

<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>

It's work well and for open the new modal I have this, but they don't work ...

<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>

How I can do ? Thank you for your help

Answer 1

Try to organize your code like this:

$(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;


});

My JSFiddle example

UPDATE

If you resolving handler script tags with PHP, you could try this approach.

You still have $('#oModalPDF').on('hidden.bs.modal', ... ) handler inside modal initialization, but also you have:

window.dialogOnCloseHandler = null;

that stores your callack after close event. It is a bad pattern to store something in global scope. So you should refactor that callbacks storage for your case.

$(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);

});

})

Your after close event callback script:

 $(document).ready(function(){

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

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

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

});

Here you just update window.dialogOnCloseHandler property with you handler.

JSFiddle example

Answer 2

I haven't tested this completely but I believe you do not need to add the code

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

inside the $('.modal').click event as you have written.

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

What this will do is that as soon as the previous modal closes, it will trigger the show event of the next modal.

Answer 3

I think you should be listening for the hidden.bs.modal event before hiding the modal. Right now you're hiding the modal and then start listening for the hidden event which won't be triggered as the modal is already hidden.

$('.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');

});

I don't know if you're animating anything, but if not you won't even have to listen to an event, you could simple hide the modal and open a new one on click:

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

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

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