問題一覧に戻る
初級環境設定
問題7: ターミナルのカスタマイズ - モーダルモード

ターミナルがポップアップオーバーレイとして表示されるモーダルモードの使い方を学びます。これは、必要なときまでターミナルを非表示にしておきたい場合に便利です。モーダルモードは、オンデマンドで表示される、クリーンで集中しやすいインターフェースを提供します。

<!DOCTYPE html>
<html lang="en">"en">
<head>
    <meta charset="UTF-8">"UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jupiter Terminal Demo</title>
    <script src="https://terminal.jup.ag/main-v4.js" data-preload defer>src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
</head>
<body>
    <div class="container">class="container">
        <h1>Jupiter Terminal Demo</h1>
        <button id="open-jupiter">id="open-jupiter">Swap Now</button>
    </div>

    <script>
        window.addEventListener("load", () => {
            const openButton = document.getElementById("open-jupiter");

            openButton.addEventListener("click", () => {
                window.Jupiter.init({
                    // ポップアップターミナルオーバーレイ用のモーダルモードに設定
                    displayMode: "",
                });
            });
        });
    </script>
</body>
</html>