Question

我在两个模态之间切换。第一个模态包含一个调用此函数的按钮：

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

反过来打开以下模式：

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

但是，当我单击X关闭第二个模态时，模态本身会消失，但屏幕会变灰。没有javascript错误。

有什么想法吗？

Answer 1

我之前有过另一种模式

这是V3中的一个错误，我没有在V4中遇到它只是因为我在V3中关闭我的模态时实现了相同的方法。这就是我对V3的看法：

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

确保在我做另一个之前我没有打开任何模态。在V4中我有这个：

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

我再也没遇到过那个问题。

Answer 2

以下是此问题的实际解决方案：

编辑foundation.reveal.js。在关闭函数结束时，插入以下行。

this.hide(this.settings.bg);

Answer 3

我不得不同步这项工作，因为来自第一个模态的onclick的功能是打开第二个模态并阻止第一个模态干净地关闭。

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>

顽固的zurb模式不会消失

3 个答案: