Janela modal retornar valor

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Janela modal retornar valor

Previous pageReturn to chapter overviewNext page

Telas

 

Janela1

js_1

 

Janela2

 

js_2

 

 

Fonte

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <style type="text/css">

        .modalPopup

        {

            width100%;

            height100%;

            top0;

            left0;

            positionabsolute;

            background#ccc;

        }

 

        .modalPopupInner

        {

            width300px;

            margin100px auto 0px;

            background#ffc;

            top100px;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var modal = document.getElementById("modal");

            modal.style.display = 'none';

            focar();

        }

 

        function focar() {

            var textbox = document.getElementById("texto");

            textbox.focus();

        }

 

        function openpopup() {

            var modal = document.getElementById("modal");

            var digitou = document.getElementById("texto_pop_up");

            modal.style.display = 'block';

            digitou.focus();

        }

 

        function closepopup() {

            var modal = document.getElementById("modal");

            var saida = document.getElementById("texto");

            var digitou = document.getElementById("texto_pop_up");

            saida.value = digitou.value;

            modal.style.display = 'none';

            focar();

        }

    </script>

 

</head>

<body>

    <div>

        <h1>Conteúdo</h1>

        <p>

            Pressione o link para o lookup

        </p>

        <input type="text" id="texto" />

        <p>

            <a href="javascript:openpopup();">Abrir janela</a>

        </p>

    </div>

 

    <div class="modalPopup" id="modal">

        <div class="modalPopupInner">

            <h3>Janela modal</h3>

            <p>Digite algo e pressione o link</p>

            <input type="text" id="texto_pop_up" />

            <p>

                <button onclick="javascript:closepopup();">Retornar</button>

                <!--<a href="javascript:closepopup();">Retornar</a></p> -->

        </div>

    </div>

</body>

</html>