Question

我有一个html页面，我已经放置了一个paypal结帐按钮和条纹立即付款按钮。

当点击paypal结账按钮时，我想禁用该页面，就像点击bootstrap中的模式弹出窗口一样，直到下一个paypal页面被加载

单击我页面上的默认条带按钮就可以了。

当点击paypal按钮时，单击按钮会有一点延迟，直到paypal页面加载为止，因此在paypal按钮点击后禁用页面将阻止用户在较短的等待时间内点击任何其他内容。

<form action="paypal_checkout.php" method="post" autocomplete="off">                                                
<input type="hidden" name="product" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="bookingid" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="price" value="<?php echo $singleUserBooking[0]['booking_price']; ?>">   
<input type="hidden" name="currency" value="<?php echo strtoupper($singleUserBooking[0]['booking_currency']); ?>">  
<input type="image" src="assets/images/payment/gold-rect-paypalcheckout-34px.png" alt="Submit">
</form>

如何点击我在上面的表单中单击按钮时禁用页面/背景

我在页面主题

中使用twitter bootstrap

最简单的原因是什么，谢谢

Answer 1

你可以有一个absolute定位的div，最初是隐藏的，点击后可以看到它的风格设置为

position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:rgba(100,100,100,0.75);

您可以选择在此div中显示消息Please wait

Answer 2

将您的网页内容包围在div中，并在需要时隐藏它。

例如：

<form id="Form1" method="post" runat="server">
  <div id="mainContent">
    some text
    <br> some more text
    <br> even more text
    <br>
    <input onclick="JavaScript: hideContent();" type="button" value="Hide Content">
  </div>
  <input onclick="JavaScript: showContent();" type="button" value="Show Content">
</form>
<script type="text/javascript">
  <!--
  function hideContent() {
    document.getElementById('mainContent').style.display = 'none';
  }

  function showContent() {
    document.getElementById('mainContent').style.display = 'block';
  }
  // -->
</script>

编辑：

为了给它一些叠加（涂黑）你可以做这样的事情： Example

你还可以禁用页面匹配：

document.getElementById("btn1").disabled = true;

Answer 3

使用此PayPal按钮，它会为您处理：https://developer.paypal.com/demo/checkout/#/pattern/client

在按钮提交单击时禁用页面背景

3 个答案: