This is only the pop up and css, you will need to build this into your ajax on success function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <input type="button" class="myclass" name="mybutton" value="mybutton" onClick="dog()";> <!-- Trigger --> <div class="overlay"></div><!-- hidden by css --> <div class="popup"><!-- hidden by css --> <div id="form"> <div id="updatebudget">Getting results...<br> </div> <div id="holder"><img src="spinner.gif"></div> </div> </div> <script> function dog() { $(".overlay, .popup").fadeToggle(); }; </script> <style> .overlay { position:absolute; display:none; /* color with alpha transparency */ background-color: rgba(0, 0, 0, 0.7); /* stretch to screen edges */ top: 0; left: 0; bottom: 0; right: 0; } .popup { position: absolute; width: 250px; height: 100px; display: none; text-align: center; /* center it ? */ top: 50%; left: 50%; margin-left: -180px; margin-top: -75px; } #holder { left: 232px; position: absolute; top: -39px; } #updatebudget { margin-top: -60px; color: #fff; margin-right: 30px; background-color: #8BC53F; border-radius: 10px; border-color: #808080; border-width: 2px; height: 49px; /* height of form popup*/ width: 280px; /* width of form popup*/ padding: 20px; text-align: left; border-style: solid; border-width: 3px; } </style> |
