Modal Bootstrap superimposed on dark background in request without reflesh

Question

Hello, programmers, I’m having a hard time deploying a modal in a data call that will remain hidden. For example, I have an ajax pagination that works correctly, but when deploying a modal to call some information it even appears , but in position at the top and sits underneath the dark screen when calling the modal and when calling other data it only sits at the top, and tried to make the call with load but without success, because the script uses $.ajax together with $ajaComplete, and follows the code:

NOTE: Note that the modal call usually works, because the example here is within the same index page, but my example of admin has 3 files 1st page called refined search.php where the form where you do the search filter. 2º filtering search . php where I take the data post paths and send to the ajax script with php giving an echo along the url. 3º dados refina busca . php is where the data collected from the database will come from. Until then it works normally but the modal opens only at the top and under the dark effect screen of the bootstrap, and I believe for being asynchronous the modal does not accept, but in another project using the load it works normally. Could I adapt a load in this Ajax code If anyone can help me, thank you.

NOTE: My pagination is without Reload on the page.

$(document).ready(function(){
//função para mostrar o loading
function loading_show(){

}
//função para esconder o loading
function loading_hide(){
$('#loading').fadeOut('fast');
} 
function fundo_loading_hide (){
$('#fundo_loading').fadeIn('fast');	
}
function fundo_loading(){
$('#fundo_loading').fadeOut('fast');	
}
function loading_show_imoveis(){

}
function loading_hide_imoveis(){
$('#loading_imoveis').fadeOut('fast');
$('#fundo_loading').fadeOut('fast');
} 


function loadData(page){
fundo_loading_hide();
loading_show();     
loading_show_imoveis();               
$.ajax({
type: "POST",
url: "dados_filtrando_busca.php?codigo=<?php echo $codigo;?>&finalidade=<?php echo $finalidade;?>&tipo=<?php echo $tipo_id_3;?>&endereco=<?php echo $endereco_id_3 ;?>&bairro=<?php echo $bairro_id_3;?>&cidade=<?php echo $cidade_id_3;?>&valor=<?php echo $valor;?>",
data: "page="+page,
success: function(msg){
$("#container").ajaxComplete(function(event, request, settings){
fundo_loading();
loading_hide();
loading_hide_imoveis();
$("#container").html(msg);
$("#myModalfavoritos").html(msg);
});
}
});
}
loadData(1);  // For first time page load default results
$('#container .pagination_topo li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
}); 
loadData(1);  // For first time page load default results
$('#container .pagination_rodape li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
}); 
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total_pagina_topo').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Entre com o número da página : Total de Páginas '+no_of_pages);
return false;
}   
});
$('#go_btn_rodape').live('click',function(){
var page = parseInt($('.goto_rodape').val());
var no_of_pages = parseInt($('.total_pagina_rodape').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Entre com o número da página : Total de Páginas'+no_of_pages);
return false;
}   
});
});

.modal { z-index:-2;}
.codigo_busca{background: rgba(10,89,137,0.78);background: -moz-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(10,89,137,0.78)), color-stop(100%, rgba(10,89,137,0.7)));
background: -webkit-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%);
background: -o-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%);
background: -ms-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%);
background: linear-gradient(to bottom, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a5989', endColorstr='#0a5989', GradientType=0 );color:#FFF; padding:10px; text-align:center; border-radius:5px 5px 0px 0px;}
.result_busca { position:relative; margin:0 auto;text-align:center;}
.result_busca .btn-success{ width:50%;}
.busca_filtro{
width:28%;
position:relative;
font-size:1.0em;
font-family: Arial, Helvetica, sans-serif;
font-weight:400;
min-width:300px;
margin:-15px 36.5% auto;
height:40px;background-color:#46F;
padding:9px;}
.busca_filtro a,.form_busca_filtrada_botao a{ color:#FFF;}
.busca_filtro:hover{ background-color:#16F;color:#FFF;}.

.form_busca_filtrada_botao{
width:31%;
font-size:1.0em;
font-family: Arial, Helvetica, sans-serif;
font-weight:400;
background-color:#F00;width:30%; 
height:38px;
padding:9px;}
.form_busca_filtrada_botao { position:relative; background-color:#003366;width:60%; margin:-90px 20% auto;border-radius:5px 5px 0px 0px; padding:10px;}
.form_busca_filtrada{ width:60%; margin:-34px auto; border: 1px solid #003366; border-radius:0px 0px 5px 5px; padding:22px;}
.form_busca_filtrada .btn-primary{ background-color:#F00;width:40%; margin:0 auto;}
.fa-search{font-size:15px; right:25%;position:relative; top:2px;color:#FFF}

.foto_buscar{background-color:#F8F8F8; z-index:000000; height:270px;margin-top:33px; border-radius:5px;
-moz-box-shadow:3px 3px 5px 4px #ccc;
  -webkit-box-shadow: 3px 3px 5px 3px #ccc;
  box-shadow:         2px 2px 2px 2px #CCC;}
.foto_buscar img{ position:relative;top:6px; left:20px;}
.dados_busca_result{color:#000; font-weight: 400; text-align:left; margin-left:36%; position:relative; top:-135px; }
.dados_busca_result_2{color:#000; font-weight: 400; text-align:left; margin-left:36%; position:relative; top:-277px; }
.dados_busca_result_3{color:#000; font-weight: 400; text-align:left; margin-left:53%; position:relative; top:-419px; }
.dados_busca_result span, .dados_busca_result_2 span,.dados_busca_result_3 span{color:#C00}

.dados_busca_result_edit{color:#333; font-weight: 400; text-align:left; margin-left:16%; position:relative; top:-260px;}
.dados_busca_result_ativa{color:#333; font-weight: 400; text-align:left; margin-left:29%; position:relative; top:-295px;}
.dados_busca_result_fotos{color:#333; font-weight: 400; text-align:left; margin-left:42%; position:relative; top:-329px;}
.dados_busca_result_del{color:#333; font-weight: 400; text-align:left; margin-left:55%; position:relative; top:-363px;}
.dados_busca_result_dest{color:#333; font-weight: 400; text-align:left; margin-left:68%; position:relative; top:-398px;}
.dados_busca_result_edit .btn-success, .dados_busca_result_edit span{color:#FFF; width:140px;}
.dados_busca_result_ativa .btn-primary, .dados_busca_result_ativa span{color:#FFF; width:140px;}
.dados_busca_result_fotos .btn-warning, .dados_busca_result_fotos span{color:#FFF; width:140px;}
.dados_busca_result_del .btn-danger, .dados_busca_result_del span{color:#FFF; width:140px;}
.foto_buscar .pagination_rodape{ position:relative; margin:50px auto;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="container"></div>

<div id="loading_imoveis"></div>
<div class="data"></div>

</div><br /><br /><br /><br />




<img src="https://www.jcimoveisbrasil.com/images/c_1.jpg" width="180" height="135" />
<div class="dados_busca_result">Código: <span>001</span></div>
<div class="dados_busca_result">Negócio: <span>venda</span></div>
<div class="dados_busca_result">Tipo: <span>apto</span></div>
<div class="dados_busca_result">Garagem: <span>Garagem:</span></div>
<div class="dados_busca_result">Dormitórios: <span>Dormitórios:</span></div>
<div class="dados_busca_result">Suítes: <span>Suítes:</span></div>
<div class="dados_busca_result">Banheiros: <span>Banheiros:</span></div>



<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLongoExemplo">
  Abrir endereço secreto
</button>

<!-- Modal -->
<div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="TituloModalLongoExemplo">ID ANÚNCIO 001</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       Rua da Conquista nº 10
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar mudanças</button>
      </div>
    </div>

Answer 1

Have you tried

.modal { z-index:999999;}

??

It is usually possible to control order of layers in CSS by z-index, where attributes like "position" and display" can also interfere.

I hope it helps, hugs

Answer 2

Sometimes when the bootstrap modal closes and the back dark screen continues, it may be because it inserts a div and ends up not removing the same one that is responsible for darkening.

Try putting $(".modal-backdrop"). css("display","None"); at the end of the function that will close the modal.

I was having the same difficulty and here solved.