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.
$(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">×</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>