Velo初心者向け｜簡単なポップアップの表示方法

篠原誠
4月2日
読了時間: 2分

Veloを使えば、Webサイトで簡単にポップアップ（モーダル）を表示できます。ユーザーの注意を引きたいときや、特定のアクションを促したいときにとても便利です。この記事では、初心者でも簡単に実装できるポップアップの作り方を丁寧に解説します。

① 必要な要素を配置する

まずはWixエディターで以下の要素を追加しましょう。

・ボタン（ID: myButton）

・ボックス（ID: myPopupBox）

　→このボックスの中にメッセージや画像など、表示したいコンテンツを入れます。

・閉じるボタン（ID: closeButton）

② Veloのコードを追加する

次に、以下のコードをVeloエディターに貼り付けてください。


$w.onReady(function () {
    $w("#myPopupBox").hide(); // ページ読み込み時はポップアップを非表示に

    $w("#myButton").onClick(() => {
        $w("#myPopupBox").show(); // ボタンをクリックしたらポップアップを表示
    });

    $w("#closeButton").onClick(() => {
        $w("#myPopupBox").hide(); // 閉じるボタンをクリックしたらポップアップを非表示に
    });
});

このコードは、ページを開いたときにはポップアップが表示されず、ボタンをクリックするとポップアップが表示され、閉じるボタンを押すと再び非表示になる仕組みです。