check if jquery reveal modal is active, do somethi

问题:

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'
    });
}

回答1:

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
}

回答2:

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.