Modal com href=

[igorfds 2]

Olá Boa Tarde!

 

Estou criando um layout em um sistema que foi feito anteriormente mais que precisa de uma atualização!

 

Estou querendo criar um modal, aliás já está pronto.. o problema é que não estou conseguindo colocar o conteudo dentro deste modal que está funcionando normal! Segue config atual:

<!-- LINK QUE QUERO INSERIR -->

<ul>
<li><a href="../cadastro_user.php?op=<?php echo $_GET['op'];?>" target="conteudo"><img src="2.0/img/icons/bt-cadastro.png" width="45px" height="37px"><br><b>Cadastro</b></a></li>
<li><a href="../controle/list_user.php?op=<?php echo $_GET['op'];?>" target="conteudo"><img src="2.0/img/icons/bt-lista.png" width="45px" height="37px"><br><b>Lista</b></a></li>
</ul>

<!-- CONFIGURAÇÃO DE MODAL -->	

<div id="boxes">
 
<div id="dialog" class="window">
<a href="#" class="close">Fechar [X]</a>  
</div>
  
<div id="mask"></div>
 
<script type="text/javascript">
 
$(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();
});
 
});
 
</script>

[Vitor Lopes_168190 0]

Cara eu também estou fazendo isso, mas eu tenho que abrir um link dentro de um modal... o meu esta assim:

        var dialog = document.getElementById('dialog');
	$(dialog).load('Seu html ou php');

	$("#dialog").dialog({
      		"modal": false,
	        "height": 320,
	        "width" : 930,
		 buttons: {
        "salvar": function() {
		},
		Cancel: function() {
			}
		},
	      		close: function() {
			$( this ).dialog( "close" );
	      	}
	});

$("#abremodal").click(function(e) {
	     e.preventDefault();
	     $("#dialog").dialog({"modal" : false});
	   });

<a href="#" id="abremodal">Abre modal!</a>
<div id="dialog" title="INSERIR"><iframe src="seu html ou php"></iframe></div>

So que tambem tem um problema.. se eu colocar autoOpen: false ele nao abre a modal nem clicando.

talvez deva ter algo nesse codigo que vc possa utilizar para fazer seu.

[igorfds 2]

Inseri este código que me passaram dentro do script e deu certo.. ve se te ajuda!

 

var dialog = document.getElementById('dialog');
	$(dialog).load('link');

[Vitor Lopes_168190 0]

Foi eu que passei este codigo para voce em outro post u.ú...

 

Este trecho era parcial ate achar uma solução concreta. Consequentemente achei uma maneira diferente de se fazer isso...

 

 

 

// ESTA FUNCAO PERMITE ABRIR UMA JANELA MODAL COM CONTEUDO VINDO DE FORA ATRAVES DE A HREF
    $(function (){
        $('a.janela').click(function() {
            var url = this.href;
            var dialog = $('<div style="display:hidden"></div>').appendTo('body');
            // load remote content
            dialog.load(url, {},
               function (responseText, textStatus, XMLHttpRequest) {
         // CRIANDO JANELA MODAL
                    dialog.dialog({ minWidth: 750, title: 'Inserir', });
                }
            );
            //prevent the browser to follow the link
// Para o Browser nao abrir o link em outra pagina
            return false;
        });
    });


var xmlreqs = new Array();


function CXMLReq(freed) 
{
this.freed = freed;
this.xmlhttp = false;
if (window.XMLHttpRequest) 
{
this.xmlhttp = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}


function xmlreqGET(valor,opt,acao) 
{
var url = valor;
url = url + "&dummy=" + new Date().getTime();
var opta = opt;
var conteudo = "conteudo_" + opta;


var pos = -1;


for (var i=0; i<xmlreqs.length; i++) {
if (xmlreqs[i].freed == 1) { pos = i; break; }
}
if (pos == -1) { pos = xmlreqs.length; xmlreqs[pos] = new CXMLReq(1); }
if (xmlreqs[pos].xmlhttp) {
xmlreqs[pos].freed = 0;
xmlreqs[pos].xmlhttp.open("GET",url,true);
xmlreqs[pos].xmlhttp.onreadystatechange = function() {
if (typeof(xmlhttpChange) != 'undefined') { xmlhttpChange(pos,opta,acao); }
}
if (window.XMLHttpRequest) {
xmlreqs[pos].xmlhttp.send(null);
} else if (window.ActiveXObject) {
xmlreqs[pos].xmlhttp.send();
}
if (xmlreqs[pos].xmlhttp.readyState == 1) 
{
document.getElementById(conteudo).innerHTML = "<img src='img/loader.gif'>";
}
}
}
function xmlhttpChange(pos,opt,acao) 
{
var opta = opt;
var conteudo = "conteudo_" + opta;
var link_mostra = "link_mostra_" + opta;
var link_oculta = "link_oculta_" + opta;


if (typeof(xmlreqs[pos]) != 'undefined' && xmlreqs[pos].freed == 0 && xmlreqs[pos].xmlhttp.readyState == 4) 
{
if (xmlreqs[pos].xmlhttp.status == 200 || xmlreqs[pos].xmlhttp.status == 304) 
{
//handle_response(xmlreqs[pos].xmlhttp.responseXML);
//xmldoc = xmlreqs[i].xmlhttp.responseXML;


if (acao == 'abrir')
{
document.getElementById(conteudo).innerHTML = xmlreqs[pos].xmlhttp.responseText;
document.getElementById(link_mostra).innerHTML = "";//oculta link de mostrar
document.getElementById(link_oculta).innerHTML = "<img src=img/contrai.gif>";//mostra link de ocultar
}
else
{
document.getElementById(conteudo).innerHTML = '';
document.getElementById(link_mostra).innerHTML = "<img src=img/expande.gif>";;//mostra link de exibir
document.getElementById(link_oculta).innerHTML = "";//oculta link de exibir
}
} 
else 
{
handle_error();
}
xmlreqs[pos].freed = 1;
}
}

 

 

<a href="http://google.com" id="janela" class="janela ui-state-default ui-corner-all">Clique aqui</a>