GARANTIR DESCONTO

Fórum Botões na Janela Modal #477546

29/04/2014

0

Ola galera seguinte, estou com um problema e já 'pelejei' aqui pra resolver e ate agora nem sai do lugar. Tenho uma modal que abre assim que a pagina é carregada blz... e dentro dessa modal tenho um termo e logo a baixo dois botoes com eventos simples, um é "aceito" caso ele aceite o termo ele clica no botão vai pra pagina de cadastro... e outro é "não aceito" que direciona ele para pagina home.
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.

Celiol.

Responder

Posts

29/04/2014

Joel Rodrigues

Ou você redireciona a página via JavaScript, usando o window.location, ou você põe dois links ao invés de botões.
Responder

Gostei + 0

29/04/2014

Raphael Souza

Boa noite, amigo. Segue um exemplo de modal com redirecionamento utilizando JS, HTML e CSS

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
Responder

Gostei + 0

29/04/2014

Celiol.

Cara é o seguinte tem serto em partes, antes de tudo muito obrigado.

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.

Responder

Gostei + 0

30/04/2014

Raphael Souza

Cara é o seguinte tem serto em partes, antes de tudo muito obrigado.

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.
Responder

Gostei + 0

30/04/2014

Celiol.

Então cara só que tem um detalhe eu não tenho esse btnAbrirModal, na verdade ate tenho mas ele esta em outra pagina, é assim... na pagina home tem o botão cadastrar imóvel, que direciona o usuário para pagina de cadastro, mas antes de cadastrar ai que abre a modal, para o cliente aceitar ou recusar os termos, entendeu.
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.
Responder

Gostei + 0

02/05/2014

Raphael Souza

Então cara só que tem um detalhe eu não tenho esse btnAbrirModal, na verdade ate tenho mas ele esta em outra pagina, é assim... na pagina home tem o botão cadastrar imóvel, que direciona o usuário para pagina de cadastro, mas antes de cadastrar ai que abre a modal, para o cliente aceitar ou recusar os termos, entendeu.
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.
Responder

Gostei + 0

07/05/2014

Celiol.

Cara seu codigo ajudou muito so nao sei agora como matar o click do mouse, os botoes agora que voce ajudou esta direcionando certinho. Mas se o cara clicar fora da modal ou melhor clicar em qualquer local ele fecha a modal, devo obrigar o usuario a clicar em aceito ou nao aceito, pois e uma condição obrigatória.

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.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar