Menu icon Foundation
Launch Reveal Modal from Off Canvas Nav.

I'm attempting to launch a reveal modal from an off canvas nav link. The modal contains ajax content and launches perfectly fine from a button within content. However, as soon as I try to do the same thing in the off canvas the modal won't launch. The off canvas animation seems to prevent the modal from launching. Anyone have any ideas how I can accomplish this? Thanks much for any help/direction you can provide.

revealmodalnavoff-canvasclosedropdownmenu

I'm attempting to launch a reveal modal from an off canvas nav link. The modal contains ajax content and launches perfectly fine from a button within content. However, as soon as I try to do the same thing in the off canvas the modal won't launch. The off canvas animation seems to prevent the modal from launching. Anyone have any ideas how I can accomplish this? Thanks much for any help/direction you can provide.

Wil Goolsby over 5 years ago

Your solution was actually what I was after and definitely a better solution than what I had. My little hack caused a little jump back to top after the modal was closed and the nav was closed. I can definitely post it if you still want it, but I want to make it clear that your solution is DEFINITELY the better solution.

Rafi Benkual over 5 years ago

Hi Wil,
So you modified the solution a bit? If so can you post that here for others to see?

Wil Goolsby over 5 years ago

Worked awesome Rafi. Thanks Everyone for the responses. What I had worked up was to keep the off canvas nav open when i initiated the modal and then when the modal closed it would close both the modal and the off canvas.

basically what I had done was moved the modal close into the ajax page.. then on the page that would be inside the modal I included

$(".close-reveal-modal").on("click.toggleCanvas", function(){
$(".exit-off-canvas").click();
});

Then on the page that had the off canvas nav I had to move into the page content () so that when I clicked on a nav item it wouldn't force the off canvas to close..

Rafi Benkual over 5 years ago

Yes, added off canvas close function to click on menu list item. It seems like the best/only way to do it now?

James Stone over 5 years ago

So it was a JavaScript solution?

 $(".off-canvas-list a").on("click.toggleCanvas", function(){
  $(".exit-off-canvas").click();
});

Rafi Benkual over 5 years ago

Ok, I think I figured it out. Try this http://cdpn.io/mjAzd

Rafi Benkual over 5 years ago

So I mocked up an example on codepen http://cdpn.io/owukv. Click edit pen to see code. The left menu icon has the reveal as the first link. Now we need a way to close the offcanvas on close-reveal-modal.

Alexander Haslam over 5 years ago

Have you tried using javascript to close the off canvas then trigger the modal?