CODEWITHSUNDEEP
zurb-foundation
Lurk21
Lurk21

Reputation: 2337

Stubborn zurb modal won't fade away

I am switching between two modals. The first modal contains a button that calls this function:

function teamControl(action) {
    $('#teamControlsModal').foundation('reveal', 'close');

    if (action == "create") {
        $('#teamFlavorText').html("Create a Team");
        loadBusinessInfoSelectBox('businessSize');
        loadBusinessInfoSelectBox('businessType');
        loadBusinessInfoSelectBox('businessLocation');
        $('#createTeamModal').foundation('reveal', 'open');
    }
}

Which in turn opens the following modal:

<div id="createTeamModal" class="reveal-modal">
<form id="createTeamForm" style="width: 480px; margin: auto;" 
    novalidate="novalidate"></form>
<a class="close-reveal-modal">×</a>
</div>

But, when I click the X to close the second modal, the modal itself goes away but the screen is left grayed out. No javascript error at all.

Any ideas?

Upvotes: 0

Views: 187

Answers (3)

Lurk21
Lurk21

Reputation: 2337

Here is the actual solution to this problem:

Edit foundation.reveal.js. At the end of the close function, insert the following line.

this.hide(this.settings.bg);

Upvotes: 0

Lurk21
Lurk21

Reputation: 2337

I had to async this work because the function of the onclick from the first modal was opening the second modal and preventing the first modal from cleanly closing. 

var openModal;

function teamControl(action) {
    $('#teamControlsModal').foundation('reveal', 'close');

    if (action === "create") {
        $('#teamFlavorText').html("Create a Team");
        loadBusinessInfoSelectBox('businessSize');
        loadBusinessInfoSelectBox('businessType');
        loadBusinessInfoSelectBox('businessLocation');
        //$('#createTeamModal').foundation('reveal', 'open');
        openModal = 'createTeamModal';
    }
}

function asyncModalOpen() {
    if (openModal !== '') {
        $('#' + openModal).foundation('reveal', 'open');
        openModal = '';
    }
}

function highFreqTimer() {
    asyncModalOpen();
}

HTML:

<script type="text/javascript">
    setInterval("highFreqTimer()", 500);
</script>

Upvotes: 0

von v.
von v.

Reputation: 17108

I did have another modal shown previously

That's a bug in V3 and I have not encountered it in V4 simply because I implemented the same approach when closing my modals in V3. This is what I have for V3:

function closeModals() { 
    $(".reveal-modal").trigger("reveal:close"); 
}

That ensure I don't have any modals open before I do another one. In V4 I have this:

function closeModals() { 
    $('.reveal-modal').foundation('reveal', 'close');
}

I never encountered that issue ever again.

Upvotes: 1

Related Questions