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

【问题标题】：Disable page background on button submit click在按钮提交单击时禁用页面背景
【发布时间】：2017-11-16 12:59:46
【问题描述】：

我有一个 html 页面，我在其中放置了一个 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

实现这一目标的最简单方法是什么，谢谢

【问题讨论】：

stackoverflow.com/questions/2535343/…

标签： javascript jquery html twitter-bootstrap paypal

【解决方案1】：

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

【讨论】：

【解决方案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;

【讨论】：

这与我的想法相似，但不是隐藏整个页面，我希望它像单击条形按钮一样被禁用或变黑/变灰
隐藏一切基本上会禁用一切，没有什么可以点击的。或者你真的想给它一个轻微的黑色/灰色，让它看起来被禁用了吗？

【解决方案3】：

您可以有一个 absolute 定位的 div，最初是隐藏的，点击后使其可见，将其样式设置为

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

您也可以在此 div 中显示一条消息Please wait

【讨论】：