在Magnific Popup上显示JQuery Modal

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。