Twitter Bootstrap Question posted in

Disable page background on button submit click – Twitter bootstrap

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search