Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Micilini Roll

[Procura] div inibindo o restante do site

Por , em Javascript

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

pessoal estou aqui a procura de um comando que faça o seguinte:

 

a) iremos imaginar um texto no website(um texto grande) no fim do texto há um botao que assim que clicado abre-se uma div no centro da tela e quando esta div é aberta inibe-se o texto que esta atras da div ou seja se a div estiver fechada eu vejo e texto e posso seleciona-lo,mas se a div estiver aberta eu vejo o texto mais nao posso seleciona-lo, é bem pareçido com este comando no site abaixo:

 

http://jqueryui.com/dialog/#modal-message

 

so que no caso eu ja baxei este codigo, e no caso é muito comando a ser analisado,no caso eu desejo se estiver algum tuto na net que ensine somente aquilo que desejo no item a ja esta de bom tamanho!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

vc pode fazer isso na unha sem precisar de plugin, veja: vc vai montar essa div que fica em cima do texto tudo certinho via css e depois vc entra com o jquery fazendo ela aparecer por cima quando clicar no botão. mãos a obra!

 

montando tudo certinho como falei no css: vc vai ter um código jquery assim:

 

$(document).ready(function() {

	$("#botaoDivBloqueio").click(function(){
		$("#divBloqueio").show();
	});

});

 

dentro dessa div com id #divBloqueio vc pode simular uma janela para fazer qualquer ação, esconder a div novamente pedir preenchimento de cadastro de inscrição. aí fica a sua escolha.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

obg pela ajuda Bergs mas depois de muito pesquisa na web descobri que isso é feito atraves de css mais um pitada de javascript deixo aqui pra outras pessoas que estiverem com a mesma duvida que eu o comando se encontra abaixo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style >
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-image:url(background-trans.png);
}
body {
     height:100%;
     margin:0;
     padding:0;
}
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
</style>
<script>
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<body>
<div id="overlay">
     <div>
          <p>Content you want the user to see goes here.</p>
     </div>
</div>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito