CODEWITHSUNDEEP
jquerymodal-dialog
amespower
amespower

Reputation: 917

check if jquery reveal modal is active, do something

I am trying to run some javascript ONLY on the condition that the reveal modal is active. The problem is that the methods I have tried have been True whether the modal is active or not. Below is an example of what I am trying to accomplish. I have tried :is visible method, also :active. I am using zurb reveal modal.

The html:

<div id="myModal" class="reveal-modal">
    <ul>
        <li>some list item</li>
        <li>some list item</li>
    </ul>
</div> <!--/myModal-->

The JS:

<script>
    if ($('#myModal:active').length){
        console.log('yes'); //always yes even when not revealed
    } else { 
        //do nothing
    }
</script>

//also tried if ($('#myModal').hasClass('someClass'))

EDIT

when active there is CSS of "visibility" : "visible", otherwise "hidden" so I tried the following, but it is not responding to the conditional. Any ideas why that might happen?

if($("#myModal").css("visibility", "hidden").length > 0) {
    console.log('is hidden');
} else {
    console.log('is shown');
}

This is the cookie code with Zurb's options for the reveal popup. 

if (document.cookie.indexOf('visited=true') == -1) {
    var tenYears = 3600 * 1000 * 24 * 365 * 10;   //1000*60*60*24*15;//15days
    var expires = new Date((new Date()).valueOf() + tenYears);
    document.cookie = "visited=true;expires=" + expires.toUTCString() +  ";path=/";  //encodeURIComponent +
    // Zurb's popup reveal modal
    $('#myModal').reveal({
        animation: 'fadeAndPop', 
        animationspeed: 100,                      
        closeonbackgroundclick: true,              
        dismissmodalclass: 'close-reveal-modal'
    });
}

Upvotes: 1

Views: 8974

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16369

EDIT

Gone is my beautiful answer about :active, hopefully this simpler answer will help you with your real question, which basically is how I can i register that the modal is open on the page, and perform some code based on this?

The answer is adopted from an answer on this StackOverflow post, and also taken from the Foundation documentation:

$('#myModal').reveal({
    animation: 'fadeAndPop', 
    animationspeed: 100,                      
    closeonbackgroundclick: true,              
    dismissmodalclass: 'close-reveal-modal',
    opened:function(){
        console.log('yes');
        // magic
    }
});

This opened event will only fire when ... you guessed it ... the modal is opened, which is only called that first time they visit. If for some reason you have a continuous action that needs to be stopped upon closure of the modal, just bind to closed:

$('#myModal').reveal({
    animation: 'fadeAndPop', 
    animationspeed: 100,                      
    closeonbackgroundclick: true,              
    dismissmodalclass: 'close-reveal-modal',
    opened:function(){
        console.log('yes');
        // magic
    },
    closed:function(){
        // witchcraft
    }
});

This should be along the lines of what you are looking for.

Upvotes: 1

James_1x0
James_1x0

Reputation: 931

Seems as though this plugin activates a "open" class when clicked. So you should check the link like: 

if($(".modal-link").hasClass('open')) {
    //do stuff when modal active
} else {
    //do stuff when modal not active
}

Better yet:

if($("#my-Modal").is(":visible")) {
    //you get the point
}

Upvotes: 5

Related Questions