janela pop-up

[junaooaks 3]

pessoal

 

to desenvolvendo um sistema e estou usando janela pop-up para colocar os formularios

 

gostaria de quando esta janela estiver ativa a janela pai(que fica por baixo) fique inativo

 

estilo sistema em DELPHI

 

tem como fazer isto?

[Thiago Retondar 18]

Inativa como?

 

Está usando window.open() ou janela popup construída com HTML?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[macielcr7 9]

EXEMPLO;....

http://yensdesign.com/tutorials/popupjquery/

BAIXAR

http://yensdesign.com/tutorials/popupjquery/popupjquery.rar

[junaooaks 3]

macielcr7

 

cara e isto mesmo

 

so nao estou conseguindo adaptar pra que eu preciso

 

destro desta tela que abre(pop-up) preciso colocar um formulario

 

tenho um botao em html

<li><a href="#">cliente</a></li>

como que eu faço para chamar o pop-up usando o exemplo que passou

 

baixei o exemplo

a pagina index.html contem tanto o botao que chama o pop-up tando o conteudo do pop-up

 

e nao funciona no firefox somente no navegador ie7, chrome

[Thiago Retondar 18]

Assim:

 

<li><a id="openPP" href="#">cliente</a></li>

	//LOADING POPUP
	//Click the button event!
	$("#openPP").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

Só pesquisar no código fonte.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[junaooaks 3]

:huh:

sou iniciante mas vamos la

 

olha o meu codigo

<!-- links para fazer o efeito do pop-up-->

<link rel="stylesheet" href="../../configuracao/css/popup.css" type="text/css" media="screen" />
<script src="../../configuracao/javascript/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../configuracao/javascript/popup.js" type="text/javascript"></script>

<!--********************************-->

<!-- colocar efeito do botao em css -->

<link rel="stylesheet" type="text/css" href="configuracao/css/droplinebar.css" />
<script type="text/javascript" src="configuracao/javascript/jquery.tools.min.js"></script>
<script src="configuracao/javascript/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
<!--*************************************-->
<div id="mydroplinemenu" class="droplinebar">
<ul>
  <li><a href="#">Arquivo</a>
    <ul>
       <li><a id="openPP" href="arquivo/backup/index.jsp">Backup</a></li>
    </ul>
  </li>
</ul>
</div>

esta e a minha pagina com os botoes e puxando os scripts do pop-up(exmplo)

 

a pagina index.jsp e a pagina que esta com o formulario que vai ser mostrado na janela pop-up

 

como eu procedo ? :huh: to perdido

[Thiago Retondar 18]

Não programo com framework, mas tente assim:

 

popup.js

 

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#openPP").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

 

Agora é só link o arquivo com <script> mo head.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[macielcr7 9]

Faça o download do script do site... e troque a INDEX.html...

por esta... abaixo...

 

INDEX.HTML

 

<!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" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
</head>
<body>
	<center>
		<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		<div id="button"><input type="submit" value="Press me please!" /></div>
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Titulo MpwDesiner.co.cc</h1>
		<!-- INICIO -->
		
		macielcr7 esta é a area para colocar o codigo que você quer....
		
		<!-- FIM -->
	<hr/>
			<a href="http://www.mpwdesiner.co.cc"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		</div>
	<div id="backgroundPopup"></div>
</body>
</html>

[junaooaks 3]

pessoal

 

eu acho que o meu problema esta na forma em que preciso chamar o pop-up

 

tenho um index.html com todos os meus botoes

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<html dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
<!-- links para puxar as paginas do menu-->

    <link rel="stylesheet" type="text/css" href="../configuracao/css/menu.css" />
    <script type="text/javascript" src="../configuracao/javascript/jquery.menu.js"></script>
    <script type="text/javascript" src="../configuracao/javascript/jqueryslidemenu.js"></script>

</head>
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!--************************************************************-->
<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li><a href="#">Arquivo</a>
            <ul>
                <li><a id="openPP" href="arquivo/backup/index.jsp">Backup</a></li>
                <li><a href="#">Freeradius</a></li>
                <li><a href="#">Sincronizar DB</a></li>
                <li><a href="javascript:window.close();">Sair</a></li>
            </ul>
        </li>

        <li><a href="">Cadastro</a>
            <ul>
                <li><a href="#">Cliente</a></li>
                <li><a href="#">Torres</a></li>
                <li><a href="#">Planos</a></li>
                <li><a href="#">IP</a></li>
                <li><a href="#">Usuarios</a></li>
                <li><a href="#">Permissoes</a></li>
            </ul>
        </li>

        <li><a href="">Conexao</a>
            <ul>
                <li><a href="#">Banco De Dados</a></li>
            </ul>
        </li>

        <li><a href="">Contrato</a>
            <ul>
                <li><a href="#">Internet</a></li>
            </ul>
        </li>

        <li><a href="">Relatorio</a>
            <ul>
                <li><a href="#">Usuario</a></li>
                <li><a href="#">Alteracao Status</a></li>
            </ul>
        </li>

        <li><a href="">SMS</a>
            <ul>
                <li><a href="#">Lista Telefone</a></li>
            </ul>
        </li>

        <li><a href="">Mikrotik</a>
            <ul>
                <li><a href="#">Firewall</a></li>
                <li><a href="#">Proxy</a></li>
                <li><a href="#">Dns</a></li>
                <li><a href="#">Hotspot</a></li>
                <li><a href="#">Shutdown</a></li>
                <li><a href="#">Watchdog</a></li>
            </ul>
        </li>

        <li><a href="">Controle Loja</a>
            <ul>
                <li><a href="#">Estoque</a></li>
                <li><a href="#">Vendas</a></li>
                <li><a href="#">Ordem de Servico</a></li>
            </ul>
        </li>

        <li><a href="">Sobre</a>
            <ul>
                <li><a href="#">Informacao</a></li>
                <li><a href="#">Atualizacao</a></li>
                <li><a href="#">Manual</a></li>
            </ul>
        </li>

    </ul>
    <br style="clear: left" />
</div>
</body>
</html>

a minha duvida agora e como fazer com que estes links puxa o a pagina pop-up com o efeito

coloquei um link assim so para testar e nao deu certo

<li><a id="openPP" href="arquivo/backup/index.jsp">Backup</a></li>

este arquivo contem o formulario para fazer o backup, o links esta

 

esta pagina e a pagina index e a mesma que fiz o downloads so alterei o conteudo deixando somente o formulario

 

<!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" dir="ltr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
        <link rel="stylesheet" href="general.css" type="text/css" media="screen" />
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="popup.js" type="text/javascript"></script>
</head>
<body>
        <center>
</center>
        <div id="popupContact">
                <a id="popupContactClose">x</a>
                
  <h1>BACKUP</h1>
  <!-- INICIO -->
  BACKUP DO BANCO DE DADOS 
  <!-- FIM -->
  <hr/>
  <form name="form1" id="form1" method="post" action="">
    <table width="281" border="0" align="center" cellpadding="0" cellspacing="5">
      <tr> 
        <td width="271"><input type="radio" name="radiobutton" value="radiobutton" />
          Fazer backup completo</td>
      </tr>
      <tr> 
        <td><input type="radio" name="radiobutton" value="radiobutton" />
          Sem contabilidade de conexões</td>
      </tr>
      <tr> 
        <td><input name="submit" type="submit" value="Backup" /></td>
      </tr>
    </table>
  </form>
</div>
        <div id="backgroundPopup"></div>
</body>
</html>

com o link puxando esta, ela tem que abrir da forma do pop-up

 

como prossigo :(