0

Olá senhores programadores, estou com uma dificuldade em implantar um modal em uma chamada de dados que ficarão ocultos. Por exemplo, tenho uma paginação em ajax que funciona corretamente, mas ao implantar um modal para chamar algumas informações ele até aparece , mas em posição no topo e fica por baixo da tela escura quando chama o modal e quando chamo outros dados ele só fica no topo, e tentei fazer a chamada com load mas sem sucesso, pois o script usa $.ajax junto co $ajaComplete, e segue o código:

OBS: Notem que funciona normalmente a chamada do modal , pois o exemplo daqui esta dentro da mesma página index, mas meu exemplo do do admin tem 3 arquivos 1º página chamada busca refinada.php ondectem o formulário onde faz o filtro de busca. 2º filtrando busca .php onde pego os dados vias post e envio para o script ajax com php dando um echo junto a url. 3º dados refina busca .php é aonde serão vindos os dados coletados do banco. Até ai funciona normalmente mas o modal abre só no topo e por baixo da tela de efeito escura do bootstrap, e acredito por ser assíncromo o modal não aceita, mas em outro projeto usando o load ele funciona normalmente. Teria como eu adaptar um load nesse código Ajax Se alguém puder me ajudar , agradeço.

OBS: Minha paginação é sem reload na página.

Foto com o erro do Modal

$(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>

2 Respostas 2

0

Já tentou

.modal { z-index:999999;}

??

Normalmente é possível controlar ordem de camadas no CSS pelo z-index, onde atributos como "position" e display" também podem interferir.

Espero que ajude, abraços

1
  • Obrigado pela ajuda, mas já tentei isso mas mesmo assim ainda ele não centraliza em todos os dados vindos do banco , e se você clicar no ultimo anúncio ele só aparece no topo.
    – Jeovane
    15/03/2019 às 3:57
-1

Algumas vezes quando o modal do bootstrap fecha e a tela escura de trás continua, pode ser porque ele insere uma div e acaba não retirando a mesma que é responsável pelo escurecimento.

Tente colocar $(".modal-backdrop").css("display","none"); no final da função que irá fechar o modal.

Estava tendo a mesma dificuldade e aqui resolveu.

1
  • Essa é a div que deixa a tela escurecida: <div class = "modal-backdrop fade in"><div> 22/12/2020 às 19:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .