Janela modal

Nelson Cruz · Junho 22, 2014

Pessoal, estou tentando colocar para funcionar uma parte do site da minha empresa em uma janela modal.

Eu nunca usei JS antes e não estou conseguindo colocar para funcionar os pluguins baixados no meu projeto, alguem poderia me ajudar?

Eu preciso que a janela modal seja exibida apos o submit de um form onde vai ser buscado algumas informações do banco, estou com as páginas funcionando perfeitamente.

wanderval · Junho 22, 2014

realizar o request atravez do javascript e usar o callback sendo o retorno um JSON para assim ativar uma janela modal, bom essa foi a forma que encontrei, mas se o volume de dados for muito grande então aconselho a procurar no caso de tabelas sobre algumas tecnicas de DataTable que utilizam php e requests baseado em paginação e não em 1 unico request. espero que ajude!

Nelson Cruz · Junho 22, 2014

Wanderval

Você sabe como faço para essa janela modal receber o valor desse form? talvez com esse exemplo eu consiga colocar para funcionar isso em meu projeto.

Esse plugin se chama subModal e a versão que estou usando é a 1.6.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TESTE MODAL</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="subModal.css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="subModal.js"></script>
</head>


<body>
    <form action="" method="post">
    nome <input type="text" id="nome" name="nome" value="">
    <button onclick="showPopWin('submit.php', 800, 600, null);">Enviar </button>
    </form>




</body>
</html>

Esse é o código do JS, eu gostaria também de tirar essa parte do loading.html que é chamado até a página carregar, acho que isso está dando erro no FF.

/**
 * SUBMODAL v1.6
 * Used for displaying DHTML only popups instead of using buggy modal windows.
 *
 * By Subimage LLC
 * http://www.subimage.com
 *
 * Contributions by:
 *  Eric Angel - tab index code
 *  Scott - hiding/showing selects for IE users
 * Todd Huss - inserting modal dynamically and anchor classes
 *
 * Up to date code can be found at http://submodal.googlecode.com
 */


// Popup code
var gPopupMask = null;
var gPopupContainer = null;
var gPopFrame = null;
var gReturnFunc;
var gPopupIsShown = false;
var gDefaultPage = "/loading.html";
var gHideSelects = false;
var gReturnVal = null;


var gTabIndexes = new Array();
// Pre-defined list of tags we want to disable/enable tabbing into
var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME"); 


// If using Mozilla or Firefox, use Tab-key trap.
if (!document.all) {
document.onkeypress = keyDownHandler;
}


/**
 * Initializes popup code on load. 
 */
function initPopUp() {
// Add the HTML to the body
theBody = document.getElementsByTagName('BODY')[0];
popmask = document.createElement('div');
popmask.id = 'popupMask';
popcont = document.createElement('div');
popcont.id = 'popupContainer';
popcont.innerHTML = '' +
'<div id="popupInner">' +
'<div id="popupTitleBar">' +
'<div id="popupTitle"></div>' +
'<div id="popupControls">' +
'<img src="close.gif" onclick="hidePopWin(false);" id="popCloseBox" />' +
'</div>' +
'</div>' +
'<iframe src="'+ gDefaultPage +'" style="width:100%;height:100%;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' +
'</div>';
theBody.appendChild(popmask);
theBody.appendChild(popcont);


gPopupMask = document.getElementById("popupMask");
gPopupContainer = document.getElementById("popupContainer");
gPopFrame = document.getElementById("popupFrame"); 


// check to see if this is IE version 6 or lower. hide select boxes if so
// maybe they'll fix this in version 7?
var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
gHideSelects = true;
}


// Add onclick handlers to 'a' elements of class submodal or submodal-width-height
var elms = document.getElementsByTagName('a');
for (i = 0; i < elms.length; i++) {
if (elms[i].className.indexOf("submodal") == 0) { 
// var onclick = 'function (){showPopWin(\''+elms[i].href+'\','+width+', '+height+', null);return false;};';
// elms[i].onclick = eval(onclick);
elms[i].onclick = function(){
// default width and height
var width = 400;
var height = 200;
// Parse out optional width and height from className
params = this.className.split('-');
if (params.length == 3) {
width = parseInt(params[1]);
height = parseInt(params[2]);
}
showPopWin(this.href,width,height,null); return false;
}
}
}
}
addEvent(window, "load", initPopUp);


 /**
* @argument width - int in pixels
* @argument height - int in pixels
* @argument url - url to display
* @argument returnFunc - function to call when returning true from the window.
* @argument showCloseBox - show the close box - default true
*/
function showPopWin(url, width, height, returnFunc, showCloseBox) {
// show or hide the window close widget
if (showCloseBox == null || showCloseBox == true) {
document.getElementById("popCloseBox").style.display = "block";
} else {
document.getElementById("popCloseBox").style.display = "none";
}
gPopupIsShown = true;
disableTabIndexes();
gPopupMask.style.display = "block";
gPopupContainer.style.display = "block";
// calculate where to place the window on screen
centerPopWin(width, height);


var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);




gPopupContainer.style.width = width + "px";
gPopupContainer.style.height = (height+titleBarHeight) + "px";


setMaskSize();


// need to set the width of the iframe to the title bar width because of the dropshadow
// some oddness was occuring and causing the frame to poke outside the border in IE6
gPopFrame.style.width = parseInt(document.getElementById("popupTitleBar").offsetWidth, 10) + "px";
gPopFrame.style.height = (height) + "px";


// set the url
gPopFrame.src = url;


gReturnFunc = returnFunc;
// for IE
if (gHideSelects == true) {
hideSelectBoxes();
}


window.setTimeout("setPopTitle();", 600);
}


//
var gi = 0;
function centerPopWin(width, height) {
if (gPopupIsShown == true) {
if (width == null || isNaN(width)) {
width = gPopupContainer.offsetWidth;
}
if (height == null) {
height = gPopupContainer.offsetHeight;
}


//var theBody = document.documentElement;
var theBody = document.getElementsByTagName("BODY")[0];
//theBody.style.overflow = "hidden";
var scTop = parseInt(getScrollTop(),10);
var scLeft = parseInt(theBody.scrollLeft,10);


setMaskSize();


//window.status = gPopupMask.style.top + " " + gPopupMask.style.left + " " + gi++;


var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);


var fullHeight = getViewportHeight();
var fullWidth = getViewportWidth();


gPopupContainer.style.top = (scTop + ((fullHeight - (height+titleBarHeight)) / 2)) + "px";
gPopupContainer.style.left =  (scLeft + ((fullWidth - width) / 2)) + "px";
//alert(fullWidth + " " + width + " " + gPopupContainer.style.left);
}
}
addEvent(window, "resize", centerPopWin);
addEvent(window, "scroll", centerPopWin);
window.onscroll = centerPopWin;




/**
 * Sets the size of the popup mask.
 *
 */
function setMaskSize() {
var theBody = document.getElementsByTagName("BODY")[0];


var fullHeight = getViewportHeight();
var fullWidth = getViewportWidth();


// Determine what's bigger, scrollHeight or fullHeight / width
if (fullHeight > theBody.scrollHeight) {
popHeight = fullHeight;
} else {
popHeight = theBody.scrollHeight;
}


if (fullWidth > theBody.scrollWidth) {
popWidth = fullWidth;
} else {
popWidth = theBody.scrollWidth;
}


gPopupMask.style.height = popHeight + "px";
gPopupMask.style.width = popWidth + "px";
}


/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value 
 */
function hidePopWin(callReturnFunc) {
gPopupIsShown = false;
var theBody = document.getElementsByTagName("BODY")[0];
theBody.style.overflow = "";
restoreTabIndexes();
if (gPopupMask == null) {
return;
}
gPopupMask.style.display = "none";
gPopupContainer.style.display = "none";
if (callReturnFunc == true && gReturnFunc != null) {
// Set the return code to run in a timeout.
// Was having issues using with an Ajax.Request();
gReturnVal = window.frames["popupFrame"].returnVal;
window.setTimeout('gReturnFunc(gReturnVal);', 1);
}
gPopFrame.src = gDefaultPage;
// display all select boxes
if (gHideSelects == true) {
displaySelectBoxes();
}
}


/**
 * Sets the popup title based on the title of the html document it contains.
 * Uses a timeout to keep checking until the title is valid.
 */
function setPopTitle() {
return;
if (window.frames["popupFrame"].document.title == null) {
window.setTimeout("setPopTitle();", 10);
} else {
document.getElementById("popupTitle").innerHTML = window.frames["popupFrame"].document.title;
}
}


// Tab key trap. iff popup is shown and key was [TAB], suppress it.
// @argument e - event - keyboard event that caused this function to be called.
function keyDownHandler(e) {
    if (gPopupIsShown && e.keyCode == 9)  return false;
}


// For IE.  Go through predefined tags and disable tabbing into them.
function disableTabIndexes() {
if (document.all) {
var i = 0;
for (var j = 0; j < gTabbableTags.length; j++) {
var tagElements = document.getElementsByTagName(gTabbableTags[j]);
for (var k = 0 ; k < tagElements.length; k++) {
gTabIndexes[i] = tagElements[k].tabIndex;
tagElements[k].tabIndex="-1";
i++;
}
}
}
}


// For IE. Restore tab-indexes.
function restoreTabIndexes() {
if (document.all) {
var i = 0;
for (var j = 0; j < gTabbableTags.length; j++) {
var tagElements = document.getElementsByTagName(gTabbableTags[j]);
for (var k = 0 ; k < tagElements.length; k++) {
tagElements[k].tabIndex = gTabIndexes[i];
tagElements[k].tabEnabled = true;
i++;
}
}
}
}




/**
 * Hides all drop down form select boxes on the screen so they do not appear above the mask layer.
 * IE has a problem with wanted select form tags to always be the topmost z-index or layer
 *
 * Thanks for the code Scott!
 */
function hideSelectBoxes() {
  var x = document.getElementsByTagName("SELECT");


  for (i=0;x && i < x.length; i++) {
    x[i].style.visibility = "hidden";
  }
}


/**
 * Makes all drop down form select boxes on the screen visible so they do not 
 * reappear after the dialog is closed.
 * 
 * IE has a problem with wanting select form tags to always be the 
 * topmost z-index or layer.
 */
function displaySelectBoxes() {
  var x = document.getElementsByTagName("SELECT");


  for (i=0;x && i < x.length; i++){
    x[i].style.visibility = "visible";
  }
}

wanderval · Junho 22, 2014

Caro Nelson,

Analisei o seu problema, criei uma solução não diria que seja a melhor forma mais funciou para o proposito de enviar a informação para a janela modal. como não tenho referencia da quantidade de dados que ira ser mostrado não pude analisar por outro angulo, agora vamos ao que eu fiz, a primeira coisa foi retirei a tag form do formulario, o motivo e que fiz a chamada para uma função javascrpt inicialmente

criei um arquivo chaamdo transicao.js ele servira para receber as informações do form, caso vc envie aguma informação de um usuario ou cliente já cadastrado envio o id dele logo depois eu chamo a janela modal sobre o loading no arquivo subMOdal tem uma variavel gDefaultPage so colocar o valor dela como vazio;

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TESTE MODAL</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="subModal.css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="subModal.js"></script>

<script type="text/javascript" src="transicao.js"></script>
</head>


<body>
    nome <input type="text" id="nome" name="nome" value="">
	telefone <input type="text" id="telefone" name="telefone" value="">
    <button onclick="setDataWindow()">Enviar </button>
</body>
</html>

arquivo transicao.js

function setDataWindow(){
	var nome = document.getElementById('nome').value;
	var telefone = document.getElementById('telefone').value;
	
	showPopWin('submit.php?nome='+nome+'&telefone='+telefone, 
				800, 
				600, 
				null);	
}

submit.php

<!--
* include de conexão ou lógica de conexão
-->

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
<?php
	$nome = $_GET["nome"];
	$telefone = $_GET["telefone"];
	
	
	/*Logica de banco*/
		$query  = 'select * from usuario where nome="'.$nome.'"';
		$result = lerBanco($query);
	/*end*/
	
	if(count($result) > 0){
?>

		
		Nome: <?php echo $nome;?>
		Telefone: <?php echo $telefone;?>
		Cargo: <?php echo $result[0]['cargo'];?>
	
<?php }else{
	echo "dados não encontrados";
}?>
</body>
</html>

bom fiz esse teste retornando o campo cargo comparando o nome do usuario, espero que isso ajude, sendo informações especificas acho que vai funcionar mais se for de um volume alto como de tabelas acho que tem que haver modificações, espero que te ajude

Nelson Cruz · Junho 23, 2014

Obrigado mesmo, eu vou tentar colocar em produção mas isso é para uma página com uma consulta em banco, com algumas possibilidades de parâmetros.

wanderval · Junho 23, 2014

Bom como disse por não saber a lógica de negócio fiquei meio no escuro, por isso fiz uma passagem de parametro de 2 campos de um form e acrescentei a chaamda de um campo cargo que seria um campo presente no banco caso fosse somente 1 unico parametro. Bom espero que consigo sucesso, em caso de dúvida fique avontade para perguntar

Entrar

Arquivado

Janela modal

Recommended Posts

Nelson Cruz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nelson Cruz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nelson Cruz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pretty Womans in your city for night

PHP - Cadastro de Faturamento

Passar Hora para Campo Input automaticamente

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante