More than 1 year has passed since last update.

bootstrapモーダル

メモ

Last updated at 2023-01-30Posted at 2023-01-30

jsf bootstrapモーダルの部品化

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:body>
        <ui:composition>
            <div id="confirm-modal" class="modal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">確認ダイアログ</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="confirmModalUtil.cancel()"></button>
                        </div>
                        <div class="modal-body">
                            <p id="confirm-modal-message">確認メッセージ</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"  onclick="confirmModalUtil.cancel()">キャンセル</button>
                            <button type="button" class="btn btn-primary" onclick="confirmModalUtil.ok()">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var confirmModalUtil = {
                    _callback: null,
                    open: function (message, callback) {
                        this._callback = callback;
                        $("#confirm-modal-message").text(message);
                        $('#confirm-modal').show();
                    },
                    ok: function () {
                        this._callback();
                        $('#confirm-modal').hide();
                    },
                    cancel: function () {
                        $('#confirm-modal').hide();
                    }
                };
            </script>
        </ui:composition>
    </h:body>
</html>

モーダルの表示

confirmModalUtil.open("確認ダイアログてすと", function(){
  console.log('あいうえお');
});

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up