HTMLでのモーダルウィンドウの作成 – HTMLで始めるホームページ作成

HTMLでのモーダルウィンドウの作成

ホームページを作成する際、ユーザーが特定のアクションを取った時に表示されるモーダルウィンドウは非常に便利です。さらに、モーダルウィンドウを使用することで、ユーザーエクスペリエンスを向上させることができます。ここでは、基本的なHTMLを用いたモーダルウィンドウの作成方法をご紹介します。

モーダルウィンドウの基本構造

まず、モーダルウィンドウの基本的な構造を理解しましょう。基本的なHTMLは以下のようになります:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>モーダルウィンドウの内容</p>
  </div>
</div>

CSSの追加

モーダルウィンドウをスタイル付けするために、CSSも追加する必要があります。例えば、以下のようにスタイルを指定します:

.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

JavaScriptの追加

さらに、モーダルウィンドウを動作させるためには、JavaScriptを追加する必要があります。以下のコードを使用して、モーダルウィンドウを開閉できます:

var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

利用例

最後に、このリンク(外部リンク)をクリックすることで、モーダルウィンドウが表示される例を試してみましょう。

さらに情報を見る(外部リンク)