human
HTML 5のみを使用してモーダルウィンドウをどのように生成しましたか？
gpt
<！ - モーダルウィンドウを開くボタン>
<ボタンID = "mybtn">モーダルウィンドウを開く</button>

<！ - モーダルウィンドウのコンテンツ - >
<div id = "mymodal" class = "modal">
  <div class = "modalconcent">
    <span class = "close">＆times; </s
    <p>これはモーダルウィンドウの内容です。</p>
  </div>
</div>
*モーダルウィンドウのスタイル */
モーダル{
  表示：なし;/ *デフォルトのモーダルウィンドウを隠す */
  位置：修正;/ *画面上の固定場所にモーダルウィンドウを滞在させる */
  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 {
  色：黒;
  テキスト装置：なし;
  カーソル：ポインター;
}
//モーダルウィンドウを開くボタンを取得します
var btn = document.getementbyid（ "mybtn"）;

//モーダルウィンドウを取得します
var modal
human
私はあなたの答えを.htmlファイルにコピーして貼り付けるだけで、それを開くと、あなたが書いたすべてのテキストしか見ることができません。私がプログラミングの専門家ではない方法で、あなたの答えの使用方法を詳しく説明できますが、答えが不足していると思います。答えを完了してもらえますか？
gpt
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>