【初心者】HTMLポップアップ表示の作り方と利点を紹介

皆さんこんにちは新米エンジニアの新米太郎です。

皆さんはポップアップがどんな時に使われるかご存知でしょうか？

本記事では、誰でも簡単にポップアップを作れるサンプルコードの紹介とポップアップを表示する利点について話していきたいと思います。

HTMLポップアップ表示の作り方

[1メッセージ表示ポップアップの作成]

サンプル結果

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button> 

<!--確認ポップアップ--> 
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button> 
                <h4 class="modal-title">メッセージ</h4> 
            </div> 
            <div class="modal-body"> 
                <label>Hello World!</label> 
            </div> 
        </div> 
    </div> 
</div>

[２ボタン付き確認ポップアップの作成]

サンプル結果

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>
<!--ボタン付き確認ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">メッセージ</h4>
            </div>
            <div class="modal-body">
                <label>Hello World!</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

[3パスワード認証ポップアップの作成]

サンプル結果

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>

<!--パスワード認証ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                <h4 class="modal-title">チョメチョメ確認認証</h4>
            </div>
            <div class="modal-body">
                <label>チョメチョメする場合はパスワードが必要です。</label>  
                <input type="password">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

⬇️パスワード認証時の表示・非表示切り替えもチェックしておこう

【コピペOK！】JavaScriptでパスワードの表示切り替え方法

今回はJavaScriptでパスワードの表示・非表示の切り替え方法を誰でも簡単にコピペで出来ちゃうサンプルコードをご用意しました！パスワードを伏せ字にするのは、脇や背後からパスワードを見られないようにするためです。パスワードの非表示は見ず知らずの人にログインされないためのセキュリティ強化に繋がります。

plog.shinmaiblog.com

2020.11.08

[4登録ポップアップの作成]

サンプル結果

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>
<!--登録ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">チョメチョメ登録</h4>
            </div>
            <div class="modal-body">
                <p>
                    <label>チョメ</label>
                    <input type="text">
                </p>
                <p>
                    <label>チョメ</label>
                    <input type="text">
                </p>
                <p>
                    <label>メール</label>
                    <input type="text"><label>＠</label>
                    <select name=”address”>
                        <option value=”mail1”>gmail.com</option>
                        <option value=”mail2”>docomo.ne.jp</option>
                        <option value=”mail3”>i.softbank.jp</option>
                        <option value=”mail4”>y-moblie.ne.jp</option>
                    </select>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

新米太郎

ポップアップが表示されましたらあとは自分の好みに合わせてCSSなどでデザインやボタンの配置などカスタマイズしてみてください。