Fórum Botões na Janela Modal #477546
29/04/2014
0
Porem acredito que nenhum deles esta funcionando corretamente, porque quando você clica em qualquer lugar ele fecha a modal, e quando você clica em qualquer botão também. Como faço para ele aceitar o click dos bõtes, para ir pro lugar indicado.e não fechar a modal em qualquer lugar apenas no botão?
Valeu galera Delivery - TI
Celiol.
Curtir tópico
+ 0Posts
29/04/2014
Joel Rodrigues
Gostei + 0
29/04/2014
Raphael Souza
HTML
<button class='btnModal'>Clique aqui para abrir a modal</button> <div id='modal'> </div> <div id='termo'> <p>Aqui e o conteudo do termo</p> <button id='aceitar'>Acessar o Google</button> <button id='recusar'>Nao acessar o Google</button> </div>
CSS
#modal {
background: #000;
opacity: 0.5;
z-index: 1;
position: absolute;
left: 0;
top: 0;
}
#termo {
width: 400px;
height: 300px;
border-radius: 10px;
background: #fff;
position: absolute;
top: 50%;
margin-top: -150px;
left:50%;
margin-left: -200px;
z-index: 2;
}
JS e jQuery (necessário baixar o jquery)
$(document).ready(function(){
var modal = $('#modal');
var termo = $('#termo');
var xCanvas = $(window).width();
var yCanvas = $(window).height();
var btnModal = $('.btnModal');
var aTermo = $('#aceitar');
var rTermo = $('#recusar');
modal.css({
'width' : xCanvas,
'height': yCanvas
});
modal.hide();
termo.hide();
btnModal.click(function(){
modal.show();
termo.show();
});
aTermo.click(function(){
location.href = "http://www.google.com";
});
rTermo.click(function(){
modal.hide();
termo.hide();
});
});
Veja se ajuda =)
A ideia básica é essa =D
Gostei + 0
29/04/2014
Celiol.
Mas olha so que aconteceu, o botao 'nao aceito' ta certinho agora direciona para home. Porem o 'nao aceito' direciona para pagina de cadastrarImovel mas como ele renderiza a modal abre de novo pois ela esta na pagina ja de cadastro, e que tem um botao que leva para pagina de cadastro mas antes de cadastrar o cliente tem que ler e aceitar o termo, por isso a modal nao pode fechar quando clicado em qualquer local apenas nos botoes, pois assim nao tem como ele reclamar depois entendeu, mas ainda quando clico em qualquer local ele fecha a modal veio. o botao aceiter eu arrumo de boa. o problema agora é apenas como nao deixar a modal fechar com qualquer click e somente nos botoes.
Abraço valeu cara se nao souber de boa mas com essa dica ja ajudou muito.
Delivery TI.
Gostei + 0
30/04/2014
Raphael Souza
Mas olha so que aconteceu, o botao 'nao aceito' ta certinho agora direciona para home. Porem o 'nao aceito' direciona para pagina de cadastrarImovel mas como ele renderiza a modal abre de novo pois ela esta na pagina ja de cadastro, e que tem um botao que leva para pagina de cadastro mas antes de cadastrar o cliente tem que ler e aceitar o termo, por isso a modal nao pode fechar quando clicado em qualquer local apenas nos botoes, pois assim nao tem como ele reclamar depois entendeu, mas ainda quando clico em qualquer local ele fecha a modal veio. o botao aceiter eu arrumo de boa. o problema agora é apenas como nao deixar a modal fechar com qualquer click e somente nos botoes.
Abraço valeu cara se nao souber de boa mas com essa dica ja ajudou muito.
Delivery TI.
Do jeito que te passei a modal somente fecha se clicar em um dos dois botões. Veja se não colocou algo errado, pois estou testando aqui e funcionou beleza. Deve ter sido erro de implementação sua.
Quando a modal sobe ela sobrepoe o conteúdo de baixo que fica "inacessível". Se clicar em qualquer lugar da tela nada acontece, a modal permanece ativa. Se clicar em um dos dois botões a modal fecha e segue a rota de decisão que vc colocar.
Aqui está funcionando.
Gostei + 0
30/04/2014
Celiol.
Quando direciona para pagina de cadastro a modal carrega logo no onLoad da pagina no botão nem tem o evento para abrir a modal.
Gostei + 0
02/05/2014
Raphael Souza
Quando direciona para pagina de cadastro a modal carrega logo no onLoad da pagina no botão nem tem o evento para abrir a modal.
Amigo, você não precisa ter os elementos que eu coloquei. Eu fiz desse jeito pra vc ter noção do processo.
Coloque o evento no botão cadastrar imóvel que vai funcionar perfeitamente. Posta seu código que é melhor. Senão ficamos atirando no escuro.
Gostei + 0
07/05/2014
Celiol.
Meu codigo esta assim:
<script type="text/javascript">
/* java janela modal */
function open_modal(id) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var rTermo = $('.termo'); //recusa
var modal = $('.windowI');
var termo = $('.term');
//colocando cor de fundo
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
rTermo.click(function () {
location.href = "home.aspx";
});
};
$(document).ready(function () {
$("a[rel=modal]").click(function (ev) {
ev.preventDefault();
open_modal($(this).attr('href'));
});
//abrindo modal pagLoad
open_modal('.windowI');
$('.windowI, termo').click(function (ev) {
ev.preventDefault();
$('#mask').hide();
$('.windowI').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.windowI').hide();
});
});
</script>o botao como te disse nao tenho, pois minha modal abre assim que a pagina é carregada. Ha cara to com outro problema quando o cara clica em cadastrar e nao preenche os campos obrigatorios, ele mostra o erro, soque ai cara ele renderiza a pagina e mostra a modal de novo como posso fazer pra que ele so mostre a modal na primeira vez?
Muito obrigado cara.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)