Tela Modal Srs, preciso criar um modal pane usando JSF, porem a unica forma que conheço é usando o richfaces, porem não posso usar o richfaces. Alguem conhece uma forma de de gerar um midalpane sem usar richfaces ?

[RESOLVIDO]ModalPane

alves.Felipe 23 de abr. de 2010

cara, o JQuery pode ser uma opção!

surfzera 23 de abr. de 2010

usa o primefaces

rogeriosantos77 24 de abr. de 2010

Não posso utilizar nenhum outro frame

eu ate consegui criar um modal com jquery, mas não consigo chama-lo atravez do command link. So atraves do <a

Alguem sabe como chamar o modal atraves do commandlink para que eu possa usar ajax ?

seque codigo de teste que fiz

>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://richfaces.org/rich"  prefix="rich"%&gt;
&lt;%@ taglib uri="http://richfaces.org/a4j"  prefix="a4j"%&gt;


&lt;html &gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;jQuery Modal Window&lt;/title&gt;

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt;

$(document).ready(function() {	

	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		
		var id = $(this).attr('href');
	
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		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); 
	
	});
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

&lt;/script&gt;
&lt;style type="text/css"&gt;
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
.close{display:block; text-align:right;}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;

&lt;h:form id="principal"&gt;
&lt;h2&gt;Exemplos - Janela Modal com jQuery&lt;/h2&gt;

<ul>

<li><a  >Janela Modal Simples</a></li>
</ul>

&lt;div style="font-size:10px;color:#ccc"&gt;Matéria publicada sob as normas de licenciamento Creative Commons Attribution 3.0&lt;/div&gt;

&lt;div id="boxes"&gt;

&lt;div id="dialog" class="window"&gt;
<a  >Fechar [X]</a><br />
Janela Modal Simples<br />  
Aqui vai o conteúdo da sua Janela Modal Simples.

	

	&lt;h:form id="modal"&gt;
		&lt;h:inputText id="nome" value="#{beanEstado.nome}" /&gt;
	&lt;/h:form&gt;

&lt;/div&gt;

&lt;!-- Fim Janela Modal com caixa de diálogo --&gt;  






&lt;!-- Máscara para cobrir a tela --&gt;
  &lt;div id="mask"&gt;&lt;/div&gt;

&lt;/div&gt;

<br /><br />
&laquo; <a href="http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/">Voltar para o tutorial</a>

&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;

rogeriosantos77 28 de abr. de 2010

Descobri o problema.

a linha (23)

var id = $(this).attr('href');

Estava forçando a busca do nome do modal de um atributo href.
Fiquei preocupado em ver se o problema era do jsf e deixei de lado o jquery, quado resolvi ver linha a linha o jquery vi o vacilo.

4 Respostas

Topicos relacionados