0

I'm not sure if this can be done, but I appreciate some help. I have read the documentation for bootstrap 3 modal. I haven't seen an example of how to do what I'm trying to demo after the user clicks "save" button in a modal. I am trying to put up a demo that imitates content hiding and showing after a modal closes. Here is the pseudo code of the use case:

  • User clicks save button on a page in the UI
  • Clicking save launches a modal window
  • User clicks save button in the modal (using data-dismiss attr on "save" btn)
  • Modal closes
  • Page content (containing the first save button) that launched the modal fades out and different content fades in.

Is this possible? Not sure if I'm using correct method within modal (hidden.bs.modal), or correct data-* attribute or where href should point within a tag. Or if what I am trying to demo is even possible.

All content is on the same page which is set to display:none, until I call fadeIn() method on the hidden div containing the content I want to show after modal has closed, replacing the initial page content.

Below code is rudimentary and doesn't work, but hopefully if the use case above isn't clear, you can read what I am trying to do and help me out.

HTML

<a href="#" data-dismiss="modal" class="btn btn-primary savethis">Save</a>
<a href="#" data-dismiss="modal" class="btn btn-primary cancelthis">Cancel</a>

jQuery

$(".savethis").on("hidden.bs.modal", function(){
   $("#currContent").fadeOut(function(){
       $("#replacingContent").fadeIn("slow");
   });
   console.log("Modal has completely closed and old content replaced.");
});

Fiddle to view/edit

Chris22
  • 1,973
  • 8
  • 37
  • 55

1 Answers1

2

Try with this:

$('#savethis-modal').on('hidden.bs.modal', function () {
       $("#currContent").fadeOut("slow");
       $("#replacingContent").fadeIn("slow");
       console.log("Modal has closed and old content replaced.");
})

You just made the function weird. It's only one action (FadingOut) happening at the same time of the other (FadingIn). However, notice that this will trigger even if the user clicks on cancel or the exit 'x'. That's because you are binding your actions only to when the modal is hidden. Maybe you should only do that if your user clicked on save.

Heres the Updated Fiddle and it works!. http://jsfiddle.net/srf8hrux/5/

Leonel Atencio
  • 474
  • 3
  • 14
  • +1 Leonel Atencio thank you for explaining what I was doing wrong and providing the correct code! This is exactly what I want to demo. I'll need to tweak the replacingContent -- not sure why it's jumping... should a setTimeout be called so that the new content fades in a few seconds after the modal window has closed? What do you think? – Chris22 Feb 03 '15 at 20:02
  • You could just insert a delay on the FadeIn function. Some like: $("#replacingContent").delay( 100 ).fadeIn("slow"); – Leonel Atencio Feb 04 '15 at 17:56