「サイトに訪れると表示される全面お知らせ」を出したいな?
ハイ、poup-message タグ!

<script type="module" src="https://code4fukui.github.io/popup-message/popup-message.js"></script> <popup-message> こんにちは! こんな感じのHTMLを書くだけ、気軽にページ読み込み時のポップアップメッセージが表示できます </popup-message> こんなHTMLに埋め込むだけで・・・

どーんと全面メッセージが表示されます。画面外か右上の閉じるボタンをタップで閉じて、通常のサイトに戻ります。
popup-message tag demo

レスポンシブ、CSSアニメーションでふわっと表示、ポップアップ表示時の背景サイトのスクロール抑止、独立したCSSを実現するShadowRootなど、お手軽拡張タグづくりのサンプルとしてもどうぞ。 カスタマイズしたい方、コピーしたり、forkしたり、自由にご活用ください。
popup-message tag src on GitHub

自由に拡張できて便利なハイフン付きの拡張タグづくりは、手軽、強力、楽しい!
Let's extend HTMLElement!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS