Personalizada Emergente Cajas en HTML, JavaScript y CSS

Estoy tratando de crear un cuadro emergente similar a este: Haga Clic Aquí

Sólo quiero usar JavaScript. Me doy cuenta de que probablemente soy de hacer esta tarea más difícil por hacer de este requisito, pero todavía estoy tratando de aprender JavaScript, así que realmente no quiero confundirme con JQuery. Yo, básicamente, quiero hacer un aviso o alerta estilo cuadro emergente. Gracias de antemano por la ayuda!

Así que ¿cuál es tu pregunta? lo que tienen u intentado?
Desbordamiento de pila no es el lugar para un tutorial. Intentar aplicar algo, y si te quedas atascado, haga una pregunta concreta. También, jQuery no debería confundir si estás aprendiendo Javascript. Sin duda, va a hacer las cosas más fáciles en este caso, y probablemente ampliar su comprensión.
Mi pregunta es; ¿cómo puedo hacer un cuadro emergente, similar a la del enlace que he publicado, con sólo HTML, CSS, y JavaScript.
twitter.github.io/bootstrap/javascript.html#modales
bootstrap no es una respuesta.. 🙁

OriginalEl autor user2339815 | 2013-05-20

1 Kommentar

  1. 7

    Aquí está el video tutorial personalizada emergente
    https://www.youtube.com/watch?v=zK4nXa84Km4

        <!-- html file -->
        <div id="blanket" style="display:none;"></div>
        <div id="popUpDiv" style="display:none;">
    
            <a href="#" onclick="popup('popUpDiv')" >Click to Close CSS Pop Up</a>
        </div>  
       <a id="link" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>

    –script ————-

    function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=blanket_height/2-200;//200 is half popup's height
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2-200;//200 is half popup's width
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
    }

    css

    #blanket {
       background-color:#111;
       opacity: 0.65;
       *background:none;
       position:absolute;
       z-index: 9001;
       top:0px;
       left:0px;
       width:100%;
    }
    
    #popUpDiv {
        position:absolute;
        background:url(pop-back.jpg) no-repeat;
        width:400px;
        height:400px;
        border:5px solid #000;
        z-index: 9002;
    }
    
    #popUpDiv { a position:relative; top:20px; left:20px}

    Personalizada Emergente Tutorial

    Por favor, evitar enlace sólo respuestas
    Ok Quentin, he añadido el código y jsFiddle. En contra de la política para responder a mejorar su respuesta como agregar jfFiddle y más, o es que ¿por qué la gente vota abajo?
    Es generalmente útil para evitar la presentación de una respuesta hasta que se de una respuesta completa. Nadie puede decir si va a editar un enlace sólo post.

    OriginalEl autor Dory Zidon

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea