CODEWITHSUNDEEP
javascriptjqueryhtmlcssmagnific-popup
user882670
user882670

Reputation:

Display JQuery Modal on top of Magnific Popup

I'm using a Popup to display a form.

For the validation of one of the fields, I need to ask the user for additional data. I then use a dialog box from Jquery UI.

It all works fine, except that the new (second) popup is being displayed under the first. I'd like it to be on top of the first.

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

});

I tried playing with Z-Index in the CSS file, but no luck:

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

Can anyone please help? Here's a live Fiddle

Upvotes: 0

Views: 3124

Answers (1)

Rutwick Gangurde
Rutwick Gangurde

Reputation: 4912

This does it for me:

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

Updated fiddle.

Upvotes: 1

Related Questions