Template:2011FR/Form-section-popup

<style type="text/css">

1. floating-screen

{

 display: none;
 position: fixed;
 background-color: #ffffff;
 opacity: 0.70;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 filter:alpha(opacity=70);
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 z-index: 1000;

}

1. floating-paypal

{

 background-color: #f6f6f6;
 border-width: 0.3em;
 border-style: solid;
 border-color: #999999;
 display: none;
 position: fixed;
 width: 25em;
 margin-left: -12em;
 margin-top: -10em;
 padding: 1.5em 1em;
 border-radius: 0.5em;
 -moz-border-radius: 0.5em;
 -webkit-border-radius: 0.5em;

/*

 opacity: 0.0;
 filter:alpha(opacity=0);
 filter: “alpha(opacity=0)”;

• /

 top: 50%;
 left: 50%;
 z-index: 1001;

}

.floating-div {

 padding: 0.2em;

}

1. floating-cancel

{

 color: #777777;
 font-weight: bold;
 font-size: 1em;
 background-color: #f6f6f6;
 border-width: 0em;
 border-style: solid;
 border-color: #999999;
 float: right;
 z-index: 1002;
 margin-top: -1em;
 margin-right: -0.5em;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 height: 1em;
 width: 1em;
 line-height:1em;
 vertical-align: middle;
 text-align: center;
 cursor: pointer;

}

1. floating-cancel:hover{

 background-color: #f6f6f6;
 color: #555555;

}

1. floating-cancel-text{

 font-weight: bold;
 text-decoration: none;

}

1. floating-cancel-text:hover{

 color: #555555;

}

1. floating-title

{

 font-size: 1.2em;
 font-weight: bold;
 padding-bottom: 0.5em;

}

1. floating-body

{

 font-size: 0.8em;
 padding-bottom: 1em;

}

1. floating-amount

{

 font-size: 0.8em;
 font-weight: bold;

}

1. floating-amount-field{

 border-color: #C5C5C5;
 border-style: solid;
 border-width: 1px;
 height: 1.5em;
 width: 4em;
 vertical-align: middle;
 text-align: center;

}

.button-div{

 padding: 0.2em;

}

.floating-button{

 height: 2em;
 width: 17em;

}

1. floating-button-monthly{

}

1. floating-button-onetime{

}

.image-icon{

 height: 1em;

}

1. floating-secure

{

 color: #555555;
 font-size: 0.8em;
 padding-bottom: 1em;

}

</style>

<script type="text/javascript">

function dayOfMonth(){

 var date = new Date();
 var day = date.getDate();
 var dayTens = day/10;
 var dayOnes = day%10;
 var rank = "th";

 if(dayTens != 1)
 {
   if(dayOnes == 1)
     rank = "st";
   else if(dayOnes == 2)
     rank = "nd";
   else if(dayOnes == 3)
     rank = "rd";
 }

 return day+rank; 

}

function displayForcedChoice(){

 if(validateForm(document.paypalcontribution))
 {
   document.getElementById("floating-amount-field").value = amount;
   document.getElementById("floating-screen").style.display = "block";

   var element = document.getElementById("floating-paypal");
   element.style.display = "block";
 }

}

function hideForcedChoice(){

 //document.getElementById("input_amount_other").checked=true;
 //document.getElementsByName("amountGiven")[0].value = document.getElementById("floating-amount-field").value;
 document.getElementById("floating-screen").style.display = "none";
 document.getElementById("floating-paypal").style.display = "none";

}

</script>

   ×

   Make it monthly?

   Monthly donations are processed on the <script type="text/javascript">var temp = dayOfMonth(); document.write(temp); </script> of every month. You may cancel at any time.

   Donation amount: $ <input type="text" id="floating-amount-field" value="" />

     <input type="button" class="floating-button" id="floating-button-monthly" value="Sure, make it monthly" onclick="redirectPayment('3')"; />

     <input type="button" class="floating-button" id="floating-button-ontime" value="No, make a one-time donation" onclick="redirectPayment('2')"; />

    <img class="image-icon" id="floating-image-secure" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Lock.png" alt="Secure website icon" /> Your credit card will be securely processed.