Modal opening under another modal

Question

I have two modals, one I call inside the other, but it is getting below. Just like I’m doing: First I open this:

 <div class="modal fade" id="myModalAdd">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Novo Produto para o Pedido</h4>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">Código do Produto</label>
                <div class="col-md-3">
                    <input type="text" class=" form-control" asp-for="PedidosProdutosFornecedor.CodigoProduto" />
                </div>
                <div class="col-md-1">
                    <div class="col-md-1"> <th href="#" style="text-align:right"><a onclick="PesquisaProdutos();" title="Pesquisar Produtos" class="btn btn-info"><i class="fa fa-search fa-lg"></i></a></th></div>
                </div>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Adicionar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

Thus:

function abreModalAdd() {
        $('#myModalAdd').modal({ show: true })

}

And in PesquisaProdutos(); I open the other, which is underneath, it should be on top.

function PesquisaProdutos() { 
    $('#myModalProdutos').modal({show: true})
}

<div class="modal fade" id="myModalProdutos">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Pesquisar Produto</h4>
            </div>
            <div class="form-group">
                <div class="col-sm-3">
                    <select id="filtroPesquisa2" class="form-control">
                        <option value="0">Código</option>
                        <option value="1">Descrição</option>
                    </select>
                </div>
                <div class="col-sm-7">
                    <input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2()" class="form-control" />
                </div>
            </div>
            <div class="modal-body">
                <div class="table-overflow col-sm-12">
                    <table class="table table-responsive table-hover" id="tablepesquisa2">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Nome</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.Produto)
                            {
                                <tr>
                                    <td>@item.Codigo</td>
                                    <td>@item.nome</td>
                                    <td align="right">
                                        <a href="#" onclick="fecha1();IncluirProduto(@item.Id);" title="Selecionar"><i class="fa fa-check-circle fa-lg"></i></a>&nbsp;
                                    </td>
                                </tr>
                            }

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

How can I make it not happen ?

Answer 1

You have to increase a second modal css attribute called "z-index" to get it above the first modal.

There is already a good answer to this, follow the jsfiddle link http://jsfiddle.net/ivanferrer/jujk5ptu/ Credits to Ivan Ferrer