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>

我的引导程序对话框中的两个按钮应该完全按照＆＃34; normal＆＃34;中的按钮执行操作。确认对话框正在执行，并且仅当用户按下正面按钮时才应执行我的帖子。

我该怎么做？

修改

我想有点不清楚我的意思是＆＃34;正常的确认对话＆＃34;对不起，我不知道我应该如何称呼它。我的意思是所描述的here

Answer 1

步骤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步：在你的模态对话框中，为你的＆＃34;是＆＃34;添加一个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]不再存在）。

Answer 2

试试..

模态上的按钮..

<?php ... ?>

你的剧本..

<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>

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

2 个答案: