ポップアップ HTML サンプル

ポップアップ HTML サンプル：Pure Modal で実装するシンプルで軽量なモーダルウィンドウ

このページでは、Pure Modal を使用して、シンプルながらも効果的なポップアップ（モーダルウィンドウ）をウェブサイトに実装する方法を解説します。軽量で使いやすい Pure Modal の特徴や、基本的な HTML と CSS のコード例、カスタマイズのヒントなどを紹介します。

Pure Modal とは？

モーダルウィンドウを簡単に実装できる JavaScript ライブラリ
軽量で高速に動作
シンプルな設計で、カスタマイズが容易
他のライブラリへの依存関係がない

基本的なポップアップの実装方法

Pure Modal のダウンロードと HTML への導入
モーダルウィンドウを表示するボタンの作成
モーダルウィンドウの内容となる HTML 要素の作成
JavaScript での簡単な設定

HTML コード例


<!DOCTYPE html>
<html>
<head>
  <title>Pure Modal のサンプル</title>
  <link rel="stylesheet" href="pure-modal.css">
</head>
<body>

<button id="openModal">モーダルウィンドウを開く</button>

<div id="myModal" class="pure-modal">
  <div class="pure-modal-overlay"></div>
  <div class="pure-modal-content">
    <h2>モーダルウィンドウのタイトル</h2>
    <p>ここにモーダルウィンドウの内容を表示します。</p>
    <button class="close-modal">閉じる</button>
  </div>
</div>

<script src="pure-modal.js"></script>
<script>
  var modal = document.getElementById('myModal');
  var btn = document.getElementById('openModal');
  var closeBtn = document.querySelector('.close-modal');

  btn.addEventListener('click', function() {
    modal.style.display = 'block';
  });

  closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
  });
</script>

</body>
</html>

Pure Modal のカスタマイズ

項目	説明
モーダルウィンドウのサイズ	CSS で `width` や `height` プロパティを設定
モーダルウィンドウの位置	CSS で `top`, `left`, `bottom`, `right` プロパティを設定
オーバーレイの色	CSS で `background-color` プロパティを設定
オーバーレイの透明度	CSS で `opacity` プロパティを設定
アニメーション効果	CSS で `transition` プロパティを設定

応用例

画像の拡大表示
フォームの表示
動画の再生
確認ダイアログ

まとめ

Pure Modal を使用することで、シンプルで軽量なポップアップを簡単に実装できます。カスタマイズも容易で、様々な用途に活用可能です。ウェブサイトに魅力的な要素を追加する効果的な手段となります。

Q&A

Q1: Pure Modal は無料で使用できますか？

A1: はい、Pure Modal は MIT ライセンスで公開されており、無料で使用できます。

Q2: Pure Modal を使用するには、他に JavaScript ライブラリを導入する必要がありますか？

A2: いいえ、Pure Modal は単体で動作するため、他の JavaScript ライブラリは必要ありません。

Q3: モーダルウィンドウの表示中に、背景をスクロールできないようにするにはどうすればよいですか？

A3: モーダルウィンドウが表示された際に、body要素に `overflow: hidden;` のスタイルを適用することで、背景のスクロールを無効化できます。モーダルウィンドウを閉じる際には、 `overflow: auto;` に戻す必要があります。

その他の参考記事:jquery ポップアップ