デザインレシピのポップアップバナーを表示させる方法について追加質問です。

Question

お世話になっております。
デザインレシピのポップアップバナーを表示させる方法についてなのですが、表示終了時間を指定して
その時間になったら非表示にできる方法はありますでしょうか？
表示対象のバナーの期間が終了したらすぐに表示されない状態にしたい為、もし方法があればご教示宜しくお願い致します。

Answer

ECマスターズの中野です。

デザインレシピをご確認いただきありがとうございます。

> デザインレシピのポップアップバナーを表示させる方法についてなのですが、表示終了時間を指定して
> その時間になったら非表示にできる方法はありますでしょうか？

ポップアップバナーにつきまして任意の時間に表示設定が可能かどうか、
担当より確認し週明け回答させていただきます。

お時間いただきますがお待ちくださいますよう
よろしくお願いいたします。

Answer

ECマスターズの北原です。

> 表示対象のバナーの期間が終了したらすぐに表示されない状態にしたい為、もし方法があればご教示宜しくお願い致します。

こちらの機能はJavaScriptを使う必要があるため、
楽天GOLDで作られたページにのみ利用可能となります。
あらかじめご了承くださいませ。

デザインレシピのタグを一部修正したタグを、
ご用意しましたので、こちらをご利用ください。

new Date("2022/4/24 23:59:59")内の日付は、
終了日時を適時、変更してお使いください。


    
        
            
                
            
        
    
    
        p {
            margin: 0 auto;
        }

        input#modal {
            display: none;
        }

        input#modal label {
            /* こちらを追加しました。 */
            display: none;

            width: 100%;
            height: 120%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2147483646;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        input#modal label div {
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
            border: medium none;
            position: fixed;
            width: 300px;
            /*画像の横幅*/
            height: 330px;
            /*画像の縦幅*/
            bottom: 0;
            left: 0;
            margin: auto;
            position: fixed;
            right: 0;
            top: 0;
        }

        input#modal label div::before {
            content: "× Close";
            position: absolute;
            bottom: -25%;
            right: 50%;
            margin: 0 -60px 0 0;
            font-size: 3em;
            font-weight: bold;
            color: #ffffff;
        }

        input#modal:checked label {
            display: none;
        }

        input#modal label img {
            width: 300px;
            /*画像の横幅*/
            height: 330px;
            /*画像の縦幅*/
        }
    

    
        $(function () {
            // 終了日時を入力してください。
            var enddate = new Date("2022/4/24 23:59:59");

            if (new Date()