Disable page background on button submit click

Question

I have a html page where I have placed a paypal check out button and stripe pay now button.

When the paypal check out button is clicked i wanted to disable the page just like clicking a modal popup in bootstrap, until the next paypal page is loaded

clicking a default stripe button I have on my page does this already.

when the paypal button is clicked there is a small delay from clicking the button, until the paypal page loads, so disabling the page after the paypal button click would stop users clicking anything else during the small wait time.

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

how click I disable the page / background on the button click in the form above

I am using twitter bootstrap in my page theme

what would be the simplest why to achive this, thanks

https://stackoverflow.com/questions/2535343/html-overlay-height-to-cover-entire-visible-page — mplungjan, Jun 14 '17 at 11:39

score 1 · Answer 1 · answered Jun 14 '17 at 11:40

You could have an absolute positioned div with initially hidden and on click make it visible set it's style to

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

Optionally you can show a message as well Please wait inside this div

Kevin Bosman · Accepted Answer · 2017-06-14T12:06:16.280

Just surround your page content in a div, and hide it when you want.

For example:

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

Edit:

To give it some kind of overlay (blacked out) you could do something like this: Example.

And you could also disable page contens like so:

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

this is similar to what I was thinking, but instead of hiding the whole page, I wanted it to be disabled or black/ grayed out like clicking a strip button does — xop32, Jun 14 '17 at 11:52
Hiding everything basically does disable everything, there's nothing left to click on. Or do you really feel like giving it a slight black/grey color so it looks disabled? — Kevin Bosman, Jun 14 '17 at 11:58

score 0 · Answer 3 · answered Jun 14 '17 at 16:43

0

Use this PayPal button, it'll handle that for you: https://developer.paypal.com/demo/checkout/#/pattern/client

answered Jun 14 '17 at 16:43

bluepnume

16,460
8
38
48

Disable page background on button submit click

3 Answers3