Webテクノロジーを使用してモーダルウィンドウを表示する最も一般的な方法は、異なるファイルを使用することです。この場合、3を使用します。
HTML（mipagine.html）
css（misestilos.css）
JavaScript（Milogica.js）

次の手順を実行します。
0.フォルダーを作成して入力します
1. .htmlファイルを作成します
2.このファイルをテキストエディターで開きます（メモ帳、メモ帳++、ビジュアルスタジオコード...）
3. <html>を書き込みます
4.これらのラベルの中に、<Sthead> </ead>と</body>を書きます
5.内側の頭の書き込み<link rel = "styleSheet" href = "mystilos.css"> and <script src = "miogica.js"> </cript>
6.身体の内部で、私が以前にあなたに与えたコード<！ - >
7. mistelos.cssファイルを作成し、テキストエディターで開きます
8.フォーマット * */でコメントの下で以前にあなたに与えたコードを貼り付けます
9. Milogica.jsファイルを作成し、テキストエディターで開きます
10.以前にコメントの下に置いたコードをフォーマットで貼り付けます//

現在、すべての手順に従っている場合、ブラウザで.htmlを開くと、モーダルウィンドウが表示されます。

ただし、ご希望の場合は、1つのfile.html😉で実行するコードを次に示します。
.htmlでこれをヒットします

<！doctype html>
<html lang = "is">
    <irad>
        <Title>私のモーダルウィンドウ</title>
        <style>
            / *モーダルウィンドウのスタイル */
            モーダル{
                表示：なし;/ *デフォルトのモーダルウィンドウを隠す */
                位置：修正;/ *画面上の固定場所にモーダルウィンドウを滞在させる */
                z-index：1;/ *モーダルウィンドウがページの他の要素の上に表示されることを保証します */
                左：0;
                上：0;
                幅：100％;/ *モーダルウィンドウを画面の幅全体にカバーする */
                高さ：100％;/ *モーダルウィンドウを画面全体の高さをカバーする */
                オーバーフロー：自動;/ *モーダルウィンドウのコンテンツが必要に応じて移動できるようにします */
                背景色：RGB（0.0.0）;/ *モーダルウィンドウの背景色を設定 */
                背景色：RGBA（0.0,0,0.4）;/ *モーダルウィンドウを少し透明性にします */
            }

            / *モーダルウィンドウコンテンツ */
            モーダルコンテンツ{
                バックグラウンドカラー：#fefe;
                マージン：15％の車。/ *モーダルウィンドウのコンテンツを中心に */
                パディング：20px;
                国境：1pxソリッド＃888;
                幅：80％;/ *モーダルウィンドウのコンテンツの幅を設定 */
            }

            / *モーダルウィンドウを閉じるボタンのスタイル */
            。近い {
                色：＃aaa;
                フロート：そうです;
                フォントサイズ：28px;
                font-weight：bold;
            }

            .close：haver、
            .close：focus {
                色：黒;
                テキスト装置：なし;
                カーソル：ポインター;
            }
        </ style>
    </ head>
    <body>

        <ボタンID = "mybtn">モーダルウィンドウを開く</button>

        <！ - モーダルウィンドウのコンテンツ - >
        <div id = "mymodal" class = "modal">
            <div class = "modalconcent">
                <span class = "close">＆times; </s
                <p>これはモーダルウィンドウの内容です。</p>
            </div>
        </div>

        <スクリプト>
            var btn = document.getementbyid（ "mybtn"）;
            var closebtn = document.queryselector（ "。close"）
            var modal = document.queryselector（ "。モーダル"）
            btn.addeventlistener（ 'click'、（）=> {
                Modal.style.display = "block"
            }）

            closebtn.addeventlistener（ 'click'、（）=> {
                modal.style.display = "none"
            }）
        </script>

    </body>
</html>
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>