使用 PHP、jQuery 和 Bootstrap 自定义确认对话框

Question

我正在使用Bootstrap 创建一个模态确认对话框：

<script>
    jQuery("#push_confirmation").modal({show: false});
</script>

<div class="modal fade" id="push_confirmation" tabindex="-1" role="dialog" aria-labelledby="myModal5Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col text-center modal_image_failed">
                            <img src="<?php echo SYSTEM_TEMPLATES; ?>images/ic_warning_black.svg" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_title">
                            <?php echo $language_array[LV_PUSH_CONFIRMATION_TITLE]; ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_title_sub">
                            <?php echo sprintf($language_array[LV_PUSH_CONFIRMATION_DESC], "INSERT TITLE HERE"); ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center modal_footer_buttons">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_CANCEL]; ?></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我希望在我按下提交按钮后显示此模式对话框。我不希望出现标准浏览器确认对话框（因为它很难看）。

我知道如何使用 jQuery 显示此对话框

$(document).ready(function () {
    $("#push_form").submit(function () {
        $("#push_confirmation").modal('show');
    });
});

但我不知道如何强制此模态对话框用作我的公式的确认对话框：

    <form id="push_form" action="system/web/push.php" method="post">
        <div class="row">
            <div class="col card_input_push card_input_push_language">
                <select name="<?php echo PARAM_PUSH_LANGUAGE; ?>">
                    <?php echo get_languages($mysqli); ?>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col card_input card_input_push">
                <input type="text" name="<?php echo PARAM_PUSH_TITLE; ?>" placeholder="<?php echo $language_array[LV_PUSH_INPUT_TITLE]; ?>"<?php echo set_value(PARAM_PUSH_TITLE); ?>required/>
            </div>
        </div>
        <div class="row">
            <div class="col card_input_push card_input_push_message">
                <textarea name="<?php echo PARAM_PUSH_MESSAGE; ?>" placeholder="<?php echo $language_array[LV_PUSH_INPUT_MESSAGE]; ?>"<?php echo set_value(PARAM_PUSH_MESSAGE); ?>required></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col text-center card_input_push card_button_push_send">
                <button class="btn btn-default" type="submit" name="<?php echo REQUEST_SEND_GCM; ?>" value="<?php echo $language_array[LV_PUSH_INPUT_SEND]; ?>"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>
            </div>
        </div>
    </form>

我的引导对话框的两个按钮应该与“正常”确认对话框中的按钮完全一样，并且只有当用户按下肯定按钮时我的帖子才会被执行。

我该怎么做？

编辑

我想这有点不清楚我所说的“正常确认对话框”是什么意思，抱歉，我不知道该怎么称呼它。我的意思是描述here

Answer 1

试试吧..

模态按钮上的按钮..

<button type="button" data-value="confirm" class="btn btn-default confirm_action" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>
<button type="button" data-value="cancel" class="btn btn-default confirm_action" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_CANCEL]; ?></button>

你的脚本..

$(document).ready(function () {

    $("#push_form").submit(function (e) {
        e.preventDefault();
        $("#push_confirmation").modal('show');
    });
    $('.confirm_action').on('click', function(){
        if($(this).data('value') == 'confirm'){
            $('#push_form').submit();
        }
    })
});

Answer 2

第 1 步：将表单的提交按钮替换为通用按钮

之前：

<button class="btn btn-default" type="submit" name="<?php echo REQUEST_SEND_GCM; ?>" value="<?php echo $language_array[LV_PUSH_INPUT_SEND]; ?>"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>

之后：

<button type="button" class="btn btn-default" id="btnFormSubmit"><?php echo $language_array[LV_PUSH_INPUT_SEND]; ?></button>

第 2 步：在您的模态对话框中，将 id 添加到您的“是”按钮以关联点击处理程序：

<button id="btnModalSubmit" type="button" class="btn btn-default" data-dismiss="modal"><?php echo $language_array[LV_PUSH_CONFIRMATION_YES]; ?></button>

第 3 步：将点击处理程序关联到按钮

$(document).ready(function () {
    // Button in the form just shows the dialog
    $("#btnFormSubmit").click(function(event)
    {
        $("#push_confirmation").modal('show');

        event.preventDefault();
        return false;
    });

    // Button in the dialog calls submit on the form
    $("#btnModalSubmit").click(function(event)
    {
        $("#push_form").submit();

        event.preventDefault();
        return false;
    });
});

您可能需要更新您的 PHP 代码，具体取决于您检查表单是否已提交，因为提交按钮不再存在（例如，$_POST[REQUEST_SEND_GCM] 不再存在）。