パーツ番号 11-13-01 ・ CSSのみ
プッシュ通知許可ダイアログ
アプリ名・アイコンと「後で/許可」ボタンを備えたiOS風の通知許可アラートを静止表示。PWA化したWordPressサイトの通知許諾UIモックに使える。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。