ログインフォーム付きモーダルウインドウの作り方
ログインフォーム付きモーダルウインドウをHTML・CSS・JavaScriptだけで作る方法を紹介します。ボタンをクリックするとモーダルウインドウが表示され、メールアドレスとパスワードを入力できるシンプルなログインフォームを表示します。JavaScriptはモーダルの開閉だけを行うため、認証処理を追加したい場合のベースとしても利用しやすい構成です。
管理画面や会員サイト、ECサイトなど、ログイン画面を別ページへ遷移させず表示したい場面で活用できます。背景クリックまたは閉じるボタンでモーダルを閉じられるため、ユーザーが現在のページを離れることなくログイン画面を表示できます。シンプルな構成なので、デザインや入力項目の追加も行いやすく、初心者でもカスタマイズしやすいサンプルです。
このサンプルでは、ログインフォームのレイアウト、モーダルウインドウの表示・非表示、背景クリックによる閉じる動作を実装しています。スマートフォン・タブレット・PCでも表示が崩れにくいレスポンシブ対応となっているため、そのまま動作確認しながら導入できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックするとログインフォーム付きモーダルウインドウを表示します。
「ログインフォームを表示」をクリックするとモーダルウインドウが表示されます。背景または「×」ボタンをクリックすると閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ログインフォーム付きモーダルウインドウ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
==================================================
このサンプルについて
==================================================
このサンプルはHTML・CSS・JavaScriptのみで
モーダルウインドウを表示するサンプルです。
PHPと組み合わせてログイン機能を実装する場合は、
formタグを以下のように変更してください。
action="login.php"
method="post"
name属性(email・password)は
PHPで受け取る項目名としてそのまま利用できます。
認証処理・セッション管理・ログイン判定は
PHPなどサーバー側で実装してください。
==================================================
-->
<!-- モーダルを開くエリア -->
<div class="login-modal-window_wrap">
<!-- タイトル -->
<div class="login-modal-window_title">
ログインフォーム付きモーダル
</div>
<!-- 説明文 -->
<p class="login-modal-window_text">
ボタンをクリックするとログインフォームを表示します。
</p>
<!-- 開くボタン -->
<button
class="login-modal-window_open"
type="button"
data-login-modal-open>
ログインフォームを表示
</button>
</div>
<!-- モーダル背景 -->
<div
class="login-modal-window_overlay"
data-login-modal-overlay>
<!-- モーダル本体 -->
<div
class="login-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="login-modal-title">
<!-- 閉じるボタン -->
<button
class="login-modal-window_close"
type="button"
data-login-modal-close
aria-label="閉じる">
×
</button>
<!-- ログインフォーム -->
<form
class="login-modal-window_form"
action="#"
method="get">
<!-- タイトル -->
<div
id="login-modal-title"
class="login-modal-window_heading">
ログイン
</div>
<!-- メールアドレス入力欄 -->
<label>
メールアドレス
<input
type="email"
name="email"
placeholder="sample@example.com"
required>
</label>
<!-- パスワード入力欄 -->
<label>
パスワード
<input
type="password"
name="password"
placeholder="********"
required>
</label>
<!-- ログインボタン -->
<button
class="login-modal-window_submit"
type="submit">
ログイン
</button>
</form>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはログインフォーム付きモーダルウインドウの構造、CSSにはフォームとモーダルのデザイン、JavaScriptにはモーダルの開閉処理を記述しています。現在のコードにはログイン認証処理は含まれておらず、フロントエンドの表示部分のみを実装しています。
PHPと組み合わせて実際のログイン処理を行う場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。メールアドレスとパスワードにはname属性が設定されているため、PHP側ではPOSTデータとして受け取れます。パスワード照合、セッション作成、エラー処理などの認証処理は、送信先PHPで別途実装してください。
このサンプルはログイン画面の見た目とモーダル開閉を確認するためのコードです。PHPと組み合わせる場合も、HTML・CSS・JavaScriptの構成はそのまま利用でき、フォームのaction属性とmethod属性を変更することで送信処理へ接続できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html はログインフォーム、モーダル本体、開くボタン、閉じるボタンを配置します。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。メールアドレスはname=”email”、パスワードはname=”password”としてPHP側で受け取れます。
style.css はモーダルの横幅、背景色、余白、角丸、影、入力欄、ログインボタンなどのデザインを管理します。PHPと組み合わせた場合でも、このファイルはそのまま利用できます。
script.js はモーダルを開く処理、閉じるボタンで閉じる処理、背景クリックで閉じる処理を管理します。ログイン認証やフォーム送信処理は行いません。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開くと動作を確認できます。「ログインフォームを表示」をクリックするとモーダルウインドウが開き、「×」ボタンまたは背景部分をクリックすると閉じます。
PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。
action=”#”
method=”get”
を、
action=”login.php”
method=”post”
へ変更します。送信先のlogin.phpでは、emailとpasswordを受け取り、認証処理を実装してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メールアドレス欄、パスワード欄、送信先PHPを変更できます。style.cssではモーダルの横幅、背景色、入力欄の余白、角丸、影、ボタン色などを変更できます。script.jsではモーダルの開閉処理を編集できます。
数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:32px;を変更するとモーダル内部の余白が変わります。gap:18px;を変更すると入力欄同士の間隔が変わります。width:36px;とheight:36px;を変更すると閉じるボタンの大きさが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルや操作エリアの余白が縮小され、タブレットやPCでは最大横幅を保ったまま中央へ表示されます。
コメント