パーツ番号 06-14-03 ・ JavaScript使用

URLコピー完了メッセージボタン

クリックでURLがコピーされた想定の完了メッセージがふわっと表示される。埋め込みコードやページURLの共有欄に使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d06-14-03-wrap">
          <div class="d06-14-03-url">https://example.com/article/42</div>
          <button class="d06-14-03-btn" type="button">URLをコピー</button>
          <span class="d06-14-03-toast">コピーしました!</span>
        </div>

CSS

.d06-14-03-wrap { position:relative; width:100%; max-width:230px; display:flex; flex-direction:column; gap:8px; }
        .d06-14-03-url { font-size:11px; color:#6b7280; background:#f1f5f9; border-radius:8px; padding:8px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .d06-14-03-btn { border:none; border-radius:999px; background:#111827; color:#fff; padding:9px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
        .d06-14-03-toast { position:absolute; top:-8px; right:0; font-size:11px; font-weight:700; color:#059669; background:#ecfdf5; padding:4px 10px; border-radius:999px; opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
        .d06-14-03-toast.is-show { opacity:1; transform:translateY(0); }

JavaScript

(function(){
          var root = document.querySelector('.d06-14-03');
          var btn = root.querySelector('.d06-14-03-btn');
          var toast = root.querySelector('.d06-14-03-toast');
          var timer = null;
          btn.addEventListener('click', function(){
            toast.classList.add('is-show');
            clearTimeout(timer);
            timer = setTimeout(function(){ toast.classList.remove('is-show'); }, 1800);
          });
        })();

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