Foros del Web - Ver Mensaje Individual

NSD · #14 (**permalink**) 07/07/2015, 21:37

padre.html

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Box Ventanas</title>
        <style>
            .modal {
                position: fixed;
                z-index: 9999;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.8);
            }
            .modal > div {
                width: 80%;
                height: 100vh;
                padding: 20px;
                margin: 0 auto;
                background-color: #FFF;
                box-shadow: 0 0 10px #000000;
            }
            .modal > div > h2 {
                margin:0;
                padding:0 0 10px 0px;
                border-bottom:1px #ccc solid;
                font-size:22px;
            }
            .modal > div > div{
                display:block;
                padding:10px 0 0 0px;
                font-size:18px;
                line-height:22px;
            }
            .modal > div > span {
                float:right;
                display:block;
                font-size:22px;
                color:#858585;
            }
        </style>
        <script>
            Modal = function(url) {
                this.open = this.open.bind(this);
                this.close = this.close.bind(this);
                this.load = this.load.bind(this);
 
                this.url = url;
                this.box = null;
            }
 
            Modal.prototype = {
                "open" : function(title, params) {
                    this.load(params, function(status, responseText) {
                        var templ = document.createElement("template");
                        templ.innerHTML = '<div>'+
                                            '<span>X</span>'+
                                            '<h2>' + title + '</h2>'+
                                            '<div>' + responseText + '</div>'+
                                          '</div>';
                        
                        this.box = document.createElement("div");                 
                        this.box.classList.add("modal");
                        document.body.appendChild(this.box);
                        this.box.appendChild(document.importNode(templ.content, true));
                        this.box.firstChild.firstChild.addEventListener("click", this.close);
                    });
                },
                "close" : function() {
                    document.body.removeChild(this.box);
                    this.box = null;
                },
                "load" : function(params, callback) {
                    var request = new XMLHttpRequest();
                    request.open("POST", this.url);
                    request.onreadystatechange = function(callback) {
                        if(this.readyState == 4)
                            callback(this.status, this.responseText);
                    }.bind(request, callback.bind(this));
                    request.send(params);
                }
            };
        </script>
    </head>
    <body>
        <h1>Modal de comunicacion entre paginas via AJAX</h1>
        <form id="datos-origen">
            <label>
                Un numero:
                <input type="text" name="numero" value="5">
            </label>
        </form>
        <button id="open">ABRIR MODAL</button>
 
        <script>
            document.getElementById("open").addEventListener("click", function(){
                var onemodal = new Modal("hijo.php");
                onemodal.open("Pagina hijo", new FormData(document.getElementById("datos-origen")));
            });
        </script>
    </body>
</html>

hijo.php

Código PHP:

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