Tema: abrir ventana y mandar parámetros
Ver Mensaje Individual
  #20 (permalink)  
Antiguo 14/07/2015, 17:15
Papito18
 
Fecha de Ingreso: julio-2012
Ubicación: Nómoda como un ave
Mensajes: 61
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: abrir ventana y mandar parámetros
Cita:
Iniciado por NSD Ver Mensaje
padre.html
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Box Ventanas</title>
  6.         <style>
  7.             .modal {
  8.                 position: fixed;
  9.                 z-index: 9999;
  10.                 top: 0;
  11.                 left: 0;
  12.                 right: 0;
  13.                 bottom: 0;
  14.                 background: rgba(0,0,0,.8);
  15.             }
  16.             .modal > div {
  17.                 width: 80%;
  18.                 height: 100vh;
  19.                 padding: 20px;
  20.                 margin: 0 auto;
  21.                 background-color: #FFF;
  22.                 box-shadow: 0 0 10px #000000;
  23.             }
  24.             .modal > div > h2 {
  25.                 margin:0;
  26.                 padding:0 0 10px 0px;
  27.                 border-bottom:1px #ccc solid;
  28.                 font-size:22px;
  29.             }
  30.             .modal > div > div{
  31.                 display:block;
  32.                 padding:10px 0 0 0px;
  33.                 font-size:18px;
  34.                 line-height:22px;
  35.             }
  36.             .modal > div > span {
  37.                 float:right;
  38.                 display:block;
  39.                 font-size:22px;
  40.                 color:#858585;
  41.             }
  42.         </style>
  43.         <script>
  44.             Modal = function(url) {
  45.                 this.open = this.open.bind(this);
  46.                 this.close = this.close.bind(this);
  47.                 this.load = this.load.bind(this);
  48.  
  49.                 this.url = url;
  50.                 this.box = null;
  51.             }
  52.  
  53.             Modal.prototype = {
  54.                 "open" : function(title, params) {
  55.                     this.load(params, function(status, responseText) {
  56.                         var templ = document.createElement("template");
  57.                         templ.innerHTML = '<div>'+
  58.                                             '<span>X</span>'+
  59.                                             '<h2>' + title + '</h2>'+
  60.                                             '<div>' + responseText + '</div>'+
  61.                                           '</div>';
  62.                         
  63.                         this.box = document.createElement("div");                 
  64.                         this.box.classList.add("modal");
  65.                         document.body.appendChild(this.box);
  66.                         this.box.appendChild(document.importNode(templ.content, true));
  67.                         this.box.firstChild.firstChild.addEventListener("click", this.close);
  68.                     });
  69.                 },
  70.                 "close" : function() {
  71.                     document.body.removeChild(this.box);
  72.                     this.box = null;
  73.                 },
  74.                 "load" : function(params, callback) {
  75.                     var request = new XMLHttpRequest();
  76.                     request.open("POST", this.url);
  77.                     request.onreadystatechange = function(callback) {
  78.                         if(this.readyState == 4)
  79.                             callback(this.status, this.responseText);
  80.                     }.bind(request, callback.bind(this));
  81.                     request.send(params);
  82.                 }
  83.             };
  84.         </script>
  85.     </head>
  86.     <body>
  87.         <h1>Modal de comunicacion entre paginas via AJAX</h1>
  88.         <form id="datos-origen">
  89.             <label>
  90.                 Un numero:
  91.                 <input type="text" name="numero" value="5">
  92.             </label>
  93.         </form>
  94.         <button id="open">ABRIR MODAL</button>
  95.  
  96.         <script>
  97.             document.getElementById("open").addEventListener("click", function(){
  98.                 var onemodal = new Modal("hijo.php");
  99.                 onemodal.open("Pagina hijo", new FormData(document.getElementById("datos-origen")));
  100.             });
  101.         </script>
  102.     </body>
  103. </html>

hijo.php
Código PHP: 
Ver original
  1. Hola! Soy hijo.php, me mandaste el numero "<?=$_POST["numero"];?>", yo te devuelvo el doble, cuando cierres esta ventana lo vas a ver.
  2. <script>
  3.     document.getElementById("datos-origen").elements.numero.value = <?=($_POST["numero"]*2);?>;
  4. </script>

amigo, veo que tus scrips están en la misma pagina del contenido, yo estoy trabajando con funciones de js, en un documentos aparte donde creo tosas mis funciones y cada vez que ocupo una función las llamo de forma individual, me gustaría que me ayudaras a como resumo en una sola función tu escript, ´porque veo que tu tienes mas de una función y que se asocia con modal, y donde llamaría esta función.

ya separe el stilo a mi hoja de estilos pero el script aun no lo logro, espero me ayudes...