mark mark - 4 months ago 46
jQuery Question

Foundation and smoothstate doesn't open reveal modal

I'm using FoundationPress and smoothstate on my WordPress page. Now on mobile, I created a menu using hamburgers and reveal modal and works fine but after clicking on something, the menu won't open anymore. I think this is because of the smoothstate.js not reloading the script.

As an option of the smoothstate, I have this script:

onAfter: function($container, $newContent) {
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$('#abnavmodal').foundation('toggle');
event.preventDefault();
});


Here's my website. Note that the menu only appears on mobile.

Answer

I fixed the script by changing to the new Foundation 6 programmatic use plugin declaration

Here's my final script:

onAfter: function($container, $newContent) {

            var $modal = new Foundation.Reveal($('#abnavmodal'), {
              animationIn: 'slide-in-left',
              animationOut: 'slide-out-left'
            });

            // Hamburgers
            $( "#ham" ).click(function() {
                $(".hamburger").toggleClass("is-active"); //you can list several class names
                $modal.toggle();
                event.preventDefault();
            });
});
Comments