La forma mas común de mostrar una ventana modal usando tecnologías web es mediante el uso de diferentes archivos. En este caso usaremos 3:
HTML ( mipagina.html )
CSS ( misestilos.css )
JavaScript ( milogica.js )

Sigue estos pasos.
0. Crea una carpeta y entra en ella
1. Crea un archivo .html
2. Abre este archivo en un editor de texto ( notepad, notepad++, visual studio code ... )
3. Escribe las etiquetas <html></html>
4. Dentro entre estas etiquetas, escribe las etiquetas <head></head> y <body></body>
5. Dentro de head escribe <link rel="stylesheet" href="misestilos.css"> y <script src="milogica.js"></script>
6. Dentro de body pega el código que te he puesto anteriormente bajo los comentarios con el formato <!-- -->
7. Crea el archivo misestilos.css y abrelo en un editor de texto
8. Pega el código que te he puesto anteriormente bajo los comentarios con el formato * */
9. Crea el archivo milogica.js y abrelo en un editor de texto
10. Pega el código que te he puesto anteriormente bajo los comentarios con formato //

Si has seguido todos los pasos ahora, al abrir el .html en un navegador devería aparecer una ventana modal.

Pero si lo prefeieres, aquí tienes el código para que ejecute en un solo archivo.html 😉:
Pega esto en un .html

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Mi ventana modal</title>
        <style>
            /* Estilos para la ventana modal */
            .modal {
                display: none; /* Oculta la ventana modal por defecto */
                position: fixed; /* Hace que la ventana modal se quede en un lugar fijo en la pantalla */
                z-index: 1; /* Asegura que la ventana modal aparezca encima de los otros elementos de la página */
                left: 0;
                top: 0;
                width: 100%; /* Hace que la ventana modal cubra toda la anchura de la pantalla */
                height: 100%; /* Hace que la ventana modal cubra toda la altura de la pantalla */
                overflow: auto; /* Permite que el contenido de la ventana modal se desplace si es necesario */
                background-color: rgb(0,0,0); /* Establece un color de fondo para la ventana modal */
                background-color: rgba(0,0,0,0.4); /* Hace que la ventana modal tenga un poco de transparencia */
            }

            /* Contenido de la ventana modal */
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto; /* Centra el contenido de la ventana modal */
                padding: 20px;
                border: 1px solid #888;
                width: 80%; /* Establece un ancho para el contenido de la ventana modal */
            }

            /* Estilo para el botón que cierra la ventana modal */
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
        </style>
    </head>
    <body>

        <button id="myBtn">Abrir ventana modal</button>

        <!-- Contenido de la ventana modal -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <p>Este es el contenido de la ventana modal.</p>
            </div>
        </div>

        <script>
            var btn = document.getElementById("myBtn");
            var closeBtn = document.querySelector(".close")
            var modal = document.querySelector(".modal")
            btn.addEventListener('click', () => {
                modal.style.display = "block"
            })

            closeBtn.addEventListener('click', () => {
                modal.style.display = "none"
            })
        </script>

    </body>
</html>
วิธีทั่วไปที่สุดในการแสดงหน้าต่างโมดอลโดยใช้เทคโนโลยีเว็บคือการใช้ไฟล์ที่แตกต่างกัน ในกรณีนี้เราจะใช้ 3: HTML ( mypage.html ) CSS ( mystyles.css ) JavaScript ( mylogica.js ) ทำตามขั้นตอนเหล่านี้ 0. สร้างโฟลเดอร์แล้วป้อน 1. สร้างไฟล์ .html 2. เปิดไฟล์นี้ในโปรแกรมแก้ไขข้อความ (notepad, notepad++, Visual Studio code...) 3. เขียนแท็ก <html></html> 4. ภายในระหว่างแท็กเหล่านี้ ให้เขียนแท็ก <head></head> และ <body></body> 5. ภายใน head เขียน <link rel="stylesheet" href="mystyles.css"> และ <script src ="milogica .js"></script> 6. ข้างใน body ให้วางโค้ดที่ผมเคยใส่ไว้ใต้คอมเมนต์ในรูปแบบ <!-- --> 7. สร้างไฟล์ misestilos.css แล้วเปิดในโปรแกรมแก้ไขข้อความ 8 . วางโค้ดที่ฉันวางไว้ก่อนหน้าใต้ความคิดเห็นด้วยรูปแบบ * */ 9. สร้างไฟล์ milogica.js และเปิดในโปรแกรมแก้ไขข้อความ 10. วางโค้ดที่ฉันวางไว้ก่อนหน้านี้ใต้ความคิดเห็นด้วยรูปแบบ // หากคุณทำตามขั้นตอนทั้งหมดแล้ว เมื่อคุณเปิด .html ในเบราว์เซอร์ หน้าต่างโมดอลควรปรากฏขึ้น แต่ถ้าคุณต้องการ นี่คือโค้ดที่จะเรียกใช้ในไฟล์ .html ไฟล์เดียว 😉: วางสิ่งนี้ใน .html <!DOCTYPE html> <html lang="en"> <head> <title>My modal window</ title > <style> /* สไตล์สำหรับหน้าต่างโมดอล */ .modal { display: none; /* ซ่อนหน้าต่างโมดอลตามค่าเริ่มต้น */ ตำแหน่ง: แก้ไขแล้ว; /* ทำให้หน้าต่างโมดอลอยู่ในตำแหน่งคงที่บนหน้าจอ */ z-index: 1; /* ตรวจสอบให้แน่ใจว่าหน้าต่างโมดอลปรากฏที่ด้านบนขององค์ประกอบอื่น ๆ ในหน้า */ left: 0; ด้านบน: 0; ความกว้าง: 100%; /* ทำให้หน้าต่างโมดอลครอบคลุมความกว้างทั้งหมดของหน้าจอ */ ความสูง: 100%; /* ทำให้หน้าต่างโมดอลครอบคลุมความสูงทั้งหมดของหน้าจอ */ overflow: auto; /* อนุญาตให้เลื่อนเนื้อหาของหน้าต่างโมดอลหากจำเป็น */ สีพื้นหลัง: rgb(0,0,0); /* กำหนดสีพื้นหลังสำหรับหน้าต่างโมดอล */ สีพื้นหลัง: rgba(0,0,0,0.4); /* ทำให้หน้าต่างโมดอลมีความโปร่งใส */ } /* เนื้อหาของหน้าต่างโมดอล */ .modal-content { สีพื้นหลัง: #fefefe; มาร์จิ้น: อัตโนมัติ 15%; /* จัดกึ่งกลางเนื้อหาของหน้าต่างโมดอล */ padding: 20px; เส้นขอบ: 1px ทึบ #888; ความกว้าง: 80%; /* ตั้งค่าความกว้างสำหรับเนื้อหาของหน้าต่างโมดอล */ } /* สไตล์สำหรับปุ่มที่ปิดหน้าต่างโมดอล */ .close { color: #aaa; ลอย: ขวา; ขนาดตัวอักษร: 28px; น้ำหนักตัวอักษร: ตัวหนา; } .close:โฮเวอร์, .ปิด:โฟกัส { สี: สีดำ; การตกแต่งข้อความ: ไม่มี; เคอร์เซอร์: ตัวชี้; } </style> </head> <body> <button id="myBtn">เปิดหน้าต่างโมดอล</button> <!-- เนื้อหาของหน้าต่างโมดอล --> <div id="myModal" class="modal "> <div class="modal-content"> <span class="close">&times;</span> <p>นี่คือเนื้อหาของหน้าต่างโมดอล</p> </div> </div> <script> var btn = document.getElementById("myBtn"); var closeBtn = document.querySelector(".close") var modal = document.querySelector(".modal") btn.addEventListener('click', () => { modal.style.display = "block" }) closeBtn addEventListener('click', () => { modal.style.display = "none" }) </script> </body> </html>
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence