← 静的パーツギャラリーへ戻る

パーツ番号 11-13-01 ・ CSSのみ

プッシュ通知許可ダイアログ

アプリ名・アイコンと「後で/許可」ボタンを備えたiOS風の通知許可アラートを静止表示。PWA化したWordPressサイトの通知許諾UIモックに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-13-01-bg">
          <div class="d11-13-01-appbar">
            <span class="d11-13-01-appicon">SN</span>
            <span class="d11-13-01-appname">ShopNote</span>
          </div>
        </div>
        <div class="d11-13-01-dialog">
          <div class="d11-13-01-icon">
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M12 3a5 5 0 0 0-5 5v3.2c0 .6-.2 1.1-.6 1.6L5 15h14l-1.4-2.2c-.4-.5-.6-1-.6-1.6V8a5 5 0 0 0-5-5Z" stroke="#2563eb" stroke-width="1.6" stroke-linejoin="round"/><path d="M9.5 18a2.5 2.5 0 0 0 5 0" stroke="#2563eb" stroke-width="1.6" stroke-linecap="round"/></svg>
          </div>
          <div class="d11-13-01-title">"ShopNote"が通知を送信します</div>
          <p class="d11-13-01-text">注文状況やお得なクーポン情報をお知らせします</p>
          <div class="d11-13-01-btns">
            <span class="d11-13-01-btn">後で</span>
            <span class="d11-13-01-btn d11-13-01-btn-strong">許可</span>
          </div>
        </div>

CSS

.d11-13-01-bg{ position:absolute; inset:0; background:linear-gradient(180deg,#eef2ff,#e0e7ff); }
        .d11-13-01-appbar{ position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:8px; }
        .d11-13-01-appicon{
          width:26px; height:26px; border-radius:8px; background:#2563eb; color:#fff;
          font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
        }
        .d11-13-01-appname{ font-size:12px; font-weight:700; color:#3730a3; }
        .d11-13-01-dialog{
          position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:250px;
          background:#fff; border-radius:16px; padding:22px 18px 0; text-align:center;
          box-shadow:0 10px 30px rgba(30,41,59,.18);
        }
        .d11-13-01-icon{ margin-bottom:8px; }
        .d11-13-01-title{ font-size:13px; font-weight:700; color:#1f2937; line-height:1.4; }
        .d11-13-01-text{ margin-top:6px; padding-bottom:16px; font-size:11px; color:#6b7280; line-height:1.5; }
        .d11-13-01-btns{ display:flex; border-top:1px solid #e5e7eb; }
        .d11-13-01-btn{
          flex:1; padding:10px 0; font-size:12px; font-weight:600; color:#6b7280;
          border-right:1px solid #e5e7eb;
        }
        .d11-13-01-btn:last-child{ border-right:none; }
        .d11-13-01-btn-strong{ color:#2563eb; font-weight:800; }

クラス名 .d11-13-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。