パーツ番号 09-02-01 ・ JavaScript使用

アラートボックス4種

成功・情報・警告・エラーを色とアイコンで区別する通知ボックス。閉じるボタンをクリックすると消えます。WordPressの管理通知やフォーム結果表示に。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d09-02-01-wrap">
          <div class="d09-02-01-alert d09-02-01-success">
            <svg viewBox="0 0 24 24" class="d09-02-01-ic"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6" fill="none"/></svg>
            <span>保存が完了しました。</span>
            <button class="d09-02-01-x" aria-label="閉じる"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg></button>
          </div>
          <div class="d09-02-01-alert d09-02-01-info">
            <svg viewBox="0 0 24 24" class="d09-02-01-ic"><circle cx="12" cy="12" r="10"/><path d="M12 11v5" fill="none"/><circle cx="12" cy="7.5" r="1.2" fill="currentColor" stroke="none"/></svg>
            <span>新しいバージョンがあります。</span>
            <button class="d09-02-01-x" aria-label="閉じる"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg></button>
          </div>
          <div class="d09-02-01-alert d09-02-01-warn">
            <svg viewBox="0 0 24 24" class="d09-02-01-ic"><path d="M12 3l9 16H3z" fill="none"/><path d="M12 9v4" fill="none"/><circle cx="12" cy="16" r="1.1" fill="currentColor" stroke="none"/></svg>
            <span>容量が残りわずかです。</span>
            <button class="d09-02-01-x" aria-label="閉じる"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg></button>
          </div>
          <div class="d09-02-01-alert d09-02-01-error">
            <svg viewBox="0 0 24 24" class="d09-02-01-ic"><circle cx="12" cy="12" r="10"/><path d="M12 7v6" fill="none"/><circle cx="12" cy="16.5" r="1.1" fill="currentColor" stroke="none"/></svg>
            <span>送信に失敗しました。</span>
            <button class="d09-02-01-x" aria-label="閉じる"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg></button>
          </div>
        </div>

CSS

.d09-02-01{align-items:flex-start}
        .d09-02-01-wrap{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
        .d09-02-01-alert{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;border-left:4px solid;font-size:13px;line-height:1.4;animation:d261in .4s ease both}
        .d09-02-01-alert span{flex:1}
        .d09-02-01-ic{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-01-x{flex:none;width:20px;height:20px;padding:0;border:none;background:none;cursor:pointer;color:inherit;opacity:.55}
        .d09-02-01-x:hover{opacity:1}
        .d09-02-01-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
        .d09-02-01-success{background:#e9f8ef;border-color:#2fa85e;color:#1e7a42}
        .d09-02-01-info{background:#e8f1fd;border-color:#3b82f6;color:#1e5bb8}
        .d09-02-01-warn{background:#fef5e7;border-color:#e6a411;color:#9a6b04}
        .d09-02-01-error{background:#fdeaea;border-color:#e05252;color:#b03232}
        .d09-02-01-alert.d09-02-01-gone{animation:d261out .35s ease forwards}
        @keyframes d261in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
        @keyframes d261out{to{opacity:0;transform:translateX(14px);height:0;margin:0;padding-top:0;padding-bottom:0}}

JavaScript

(function(){
        var root=document.getElementById('item-09-02-01');
        root.querySelectorAll('.d09-02-01-x').forEach(function(b){
          b.addEventListener('click',function(){
            var a=b.closest('.d09-02-01-alert');
            a.classList.add('d09-02-01-gone');
            setTimeout(function(){a.style.display='none';},360);
          });
        });
      })();

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