環境

PHP 7.2.21
CakePHP 2.10.18
MySQL 5.7.27

やりたいこと

Form内容を入力後にRemodalを表示させ、その「OK」ボタン押下をsubmitボタンとしたい

やったこと

兎にも角にも公式ページよりダウンロード
https://github.com/VodkaBears/Remodal/releases

↓

distディレクトリにある4ファイルをすべて所定のディレクトリに配置する
remodal.min.jsが欠けているとオプションが無効になり
cssが欠けていると当然デザインが壊れる

Hoge.ctp

<!--jsとcssを読み込む-->
<script type="text/javascript" src="/js/vendor/1.1.1/remodal.js"></script>
<script type="text/javascript" src="/js/vendor/1.1.1/remodal.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/vendor/1.1.1/css/remodal.css">
<link rel="stylesheet" type="text/css" href="/js/vendor/1.1.1/css/remodal-default-theme.css">


<!-- Remodalの「OK」ボタンが押された後にForm内容を送信させる -->
<script>
$(function($) {
    $(document).on('confirmation', '.remodal', function () {
        $('#HogeHogeConfForm').submit();
    });
});
</script>


<!-- Remodalの表示内容 -->
<div class="remodal" data-remodal-id="setting-caution-modal">
    <h1>Hoge設定の保存</h1>
    <div style="text-align: left">
        <p>
            <div id="setting-caution-modal-message">この内容にて保存してもよろしいですか？</div>
        </p>
    </div>
    <div style="text-align: center">
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
        <button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button>
    </div>
</div>


<!-- Formのcreate() -->
<?php
    echo $this->Form->create('HogeHogeConf', [
        'url' => '/hoge/hoge_hoge/conf',
        'inputDefaults' => [
            'label' => false,
            'div'   => false,
        ],
    ]);
?>


<!-- Form入力欄を色々と用意 -->
<!-- ... -->
<!-- ... -->
<!-- ... -->


<!-- クリックでRemodalを表示させるボタン -->
<?php
    $setingButton  = '<button onclick="location.href=\'#setting-caution-modal\';return false;">保存</button>';
    echo $setingButton;
?>


<!-- Formのend() -->
<?= $this->Form->end(); ?>

結果

Remodalを呼び出しOK押下後にForm内容をsubmitすることができる
buttonの表示もCakePHPのFormHelperでやるべきだが思いつかなかった