在 Magnific Popup 的顶部显示 JQuery Modal

Question

我正在使用弹出窗口来显示表单。

为了验证其中一个字段，我需要向用户询问其他数据。然后，我使用 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;
}

谁能帮忙？这是一个现场小提琴

Answer 1

这为我做到了：

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

更新的小提琴。