Question

我正在尝试使模式显示为显示付款状态：在单击按钮时挂起，表单也使用它的操作功能并使用target =“_ blank”打开一个新窗口。

我想同时打开模态和新窗口。我尝试过使用javascript，jquery，但是当我点击按钮时，它们都没有显示模态。当我在页面文档上加载模态时，它可以工作。但我不希望这样。

我的代码

        <div class="modal fade" id="Loading_purchase_status" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Loading Payment Status</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-primary" role="alert">
                        <h4><i class="alert-ico fa fa-fw fa-ban"></i><strong>Loading your payment status!&thinsp;</strong></h4>
                        Current Status: Awaiting Payment...
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $('#please_wait').fadeOut(7000);
        $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");
    });
    $('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
    });
    </script>

然后我的表单带有按钮我想在点击时显示模态：

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="<?php echo $site_config->grabSiteSettings_manual($con, 'paypal_address'); ?>">
<input type="hidden" name="item_name" value="<?php echo $name; ?>">
<input type="hidden" name="item_number" value="<?php echo $id; ?>">
<input type="hidden" name="amount" value="<?php echo $price; ?>">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="username=<?php echo $username; ?>&product= <?php echo $name; ?>">
<input type="hidden" name="notify_url" value="<?php echo $site_callback; ?>">
<input type="hidden" name="return" value="<?php echo $site_return_success; ?>">
<input type="hidden" name="cancel_return" value="<?php echo $site_return_canceled; ?>">

<button type="submit" class="btn btn-danger" id="paypal_submit"
        style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;">
    <i class="fa fa-paypal"></i>aypal
</button>
 <button type="submit" class="btn btn-danger"
        style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;">
    <i class="fa fa-btc"></i>itcoin
</button>
</form>

我想要一个带有id="paypal_submit"的按钮，以便在点击时显示模态，但还需要显示带有表单操作网址的新窗口

Answer 1

您需要使用event.preventDefault();，

来阻止提交表单的默认浏览器行为

$('#paypal_submit').click(function (e) {
    e.preventDefault();

    $('#Loading_purchase_status').modal('show');
});

这样就可以防止表格被提交，因为模态会显示。

注意 - 在操作DOM之前，确保您的事件侦听器位于ready事件函数中。

$(document).ready(function() {
    $('#please_wait').fadeOut(7000);
    $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");

    $('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
    });
});

或...

您可以将button类型从submit更改为button，这样会更改没有event.preventDefault()的行为。

Answer 2

您需要阻止按钮单击时的默认操作，并手动执行提交操作。

防止默认的防止操作，

更改此代码

$('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
 });

到

$('#paypal_submit').click(function (e) {
        e.preventDefault();
        $('#Loading_purchase_status').modal('show');
 });

Answer 3

您需要在<script> $(document).ready(function() { $('#please_wait').fadeOut(7000); $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow"); $('#paypal_submit').click(function (e) { e.preventDefault(); $('#Loading_purchase_status').modal('show'); }); }); </script>内注册点击功能，如下所示：

/Applications

单击[提交，操作]按钮时显示模态

3 个答案:

或...