javascript - 禁用按钮上的页面背景提交点击

Question

我有一个 html 页面，我在其中放置了一个 paypal 结账按钮和 stripe pay now 按钮。

当点击 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

只需将您的页面内容包围在一个 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;