Question

我正在使用Popup来显示表单。

对于其中一个字段的验证，我需要询问用户其他数据。然后我使用Jquery UI中的对话框。

除了新的（第二个）弹出窗口显示在第一个弹出窗口之外，一切正常。我希望它能在第一个之上。

HTML：

<!-- link that opens popup -->  <a class="popup-with-form" href="#novaLinha">Abrir formulário</a>

<!-- form itself -->
<form id="novaLinha" class="mfp-hide white-popup-block">
    <ol>
        <li>
            <label for="categoria">Categoria</label>
            <input id="categoria" class="novaCat" name="categoria" type="text" placeholder="Ex.º: Vendas" required>
        </li>
    </ol>
</form>
<form id="novaCategoria" style="display:none;" title="Nova Categoria. Por favor  escolha o fluxo">
    <input type="radio" name="novaCategoria" value="Recebimentos">Recebimentos
    <br>
    <input type="radio" name="novaCategoria" value="Pagamentos">Pagamentos</form>

JS：

$(document).ready(function () {
    $('.novaCat').on('blur', function (ui, event) {
        var valor = $('.novaCat').val();
        if (valor) {
            $('#novaCategoria').dialog({
                modal: true,
                resizable: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };
    });

    //formulário popup
    $('.popup-with-form').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#name',
        callbacks: {
            beforeOpen: function () {
                if ($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });

});

我尝试在CSS文件中使用Z-Index，但没有运气：

CSS：

.white-popup-block {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    border-radius: 5px;
    z-index:500;
}
.ui-dialog {
    z-index:1000;
}

有人可以帮忙吗？这是一个实时Fiddle

Answer 1

这适合我：

.ui-dialog {
    z-index:99999;
}

更新了fiddle。

在Magnific Popup上显示JQuery Modal

1 个答案: