ポップアップ 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 ポップアップ