ダイアログ

Tweet

ダイアログに表示する内容をhtmlに書く。

<div id="category-dialog" title="カテゴリの追加" style="display:none;">

        <p>
            カテゴリー名を入力してください
        </p>
        <p><input id="category_text" type="text"></p>

        <p class="text-right">
            <button id="category_button" type="submit" class="btn btn-secondary">保存する</button>
        </p>
</div>

jQueryのサンプル。jQueryのui関連のライブラリを取り込む必要がある。

        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        $("#open-category-dialog").on("click", function() {
            $("#category-dialog").dialog({
            });
        });