javascript popup form

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • javascript popup form

      Hallo,

      ik ben aan het experimenteren met javascript.

      ben bezig met en formulier in PHP waarbij ik in een if else statement maak waarin ik graag een popup wil tevoorschijn "toveren".
      Het klikken op tekst of op een button lukt om de popup te tonen. Heb ik Google reeds gevonden dat dit mogelijk is met javascript. maar weet niet hoe

      Iemand een idee waar ik moet zoeken of hoe ik dit kan verwezelijken?

      dit is mijn code:

      Source Code

      1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      2. <SCRIPT SRC="script.js"></SCRIPT>
      3. <script src="https://www.google.com/jsapi"></script>
      4. <style>
      5. .hover_bkgr_fricc{
      6. background:rgba(0,0,0,.4);
      7. cursor:pointer;
      8. display:none;
      9. height:100%;
      10. position:fixed;
      11. text-align:center;
      12. top:0;
      13. width:100%;
      14. z-index:10000;
      15. }
      16. .hover_bkgr_fricc .helper{
      17. display:inline-block;
      18. height:100%;
      19. vertical-align:middle;
      20. }
      21. .hover_bkgr_fricc > div {
      22. background-color: #fff;
      23. box-shadow: 10px 10px 60px #555;
      24. display: inline-block;
      25. height: auto;
      26. max-width: 551px;
      27. min-height: 100px;
      28. vertical-align: middle;
      29. width: 60%;
      30. position: relative;
      31. border-radius: 8px;
      32. padding: 15px 5%;
      33. }
      34. .popupCloseButton {
      35. background-color: #fff;
      36. border: 3px solid #999;
      37. border-radius: 50px;
      38. cursor: pointer;
      39. display: inline-block;
      40. font-family: arial;
      41. font-weight: bold;
      42. position: absolute;
      43. top: -20px;
      44. right: -20px;
      45. font-size: 25px;
      46. line-height: 30px;
      47. width: 30px;
      48. height: 30px;
      49. text-align: center;
      50. }
      51. .popupCloseButton:hover {
      52. background-color: #ccc;
      53. }
      54. .trigger_popup_fricc {
      55. cursor: pointer;
      56. font-size: 20px;
      57. margin: 20px;
      58. display: inline-block;
      59. font-weight: bold;
      60. }
      61. </style>
      62. <a hidden="hidden" id="hover_bkgr_fricc" class="trigger_popup_fricc">popup</a>
      63. <div id="hover_bkgr_fricc" class="hover_bkgr_fricc">
      64. <span class="helper"></span>
      65. <div>
      66. <div class="popupCloseButton">&times;</div>
      67. <p>Add any HTML content<br />inside the popup box!</p>
      68. </div>
      69. </div>
      Display All

      script.js:

      Source Code

      1. $(window).load(function () {
      2. $(".trigger_popup_fricc").click(function(){
      3. $('.hover_bkgr_fricc').show();
      4. });
      5. $('.hover_bkgr_fricc').click(function(){
      6. $('.hover_bkgr_fricc').hide();
      7. });
      8. $('.popupCloseButton').click(function(){
      9. $('.hover_bkgr_fricc').hide();
      10. });
      11. });
      Display All
    • Volgens mij ben je al een heel eind. Waar loop je nu op vast? Of wat zou er anders moeten werken dan nu gebeurt?

      Aaron wrote:

      Waarbij de achtergrond donkerder word.

      Ah, dus je wilt een zogenaamd "smoke screen". Dit is redelijk eenvoudig te realiseren, bijvoorbeeld door een absoluut gepositioneerde div die je over je pagina heenlegt. Het enige wat je nodig hebt is wat CSS:

      CSS Source Code

      1. #popup-overlay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background-color: #333333; display: none; opacity: 0.0; }

      En een routine die deze overlay automatisch toevoegt op het moment dat je de (inline) popup opent:

      JavaScript Source Code

      1. $().ready(function() {
      2. $('body').append('<div id="popup-overlay" onclick="..."></div>');
      3. $('... selector ...').click(function() {
      4. $('#popup-overlay').fadeTo('slow', '0.7');
      5. });
      6. });
      (Waar je dus vervolgens je popup-inhoud overheen zet met een hogere z-index.)

      Hierbij kun je een onclick-event in de overlay definieren als er iets speciaals moet gebeuren, bijvoorbeeld dat deze weer gesloten moet worden als je buiten de popup klikt ofzo.
    • Bedankt allemaal voor de tips, reacties en suggesties!
      Volgende code heb ik in de website verwerkt en dit werkt zoals de klant het wenst.


      Bezoeker komt op de website. Hij vult ene formulier in en "post" de data op dezelfde pagina. In de PHP code roep ik echo '<body onload="submit()">'; aan. Hiermee komt de popup tevoorschijn. (Er zijn meerdere popup's, maar dit is een voorbeeld.)




      Javascript:

      JavaScript Source Code

      1. <script type="text/javascript">
      2. function submit()
      3. {
      4. document.getElementById("hover_bkgr_fricc").click();
      5. document.submitForm.submit();
      6. }
      7. </script>
      html:

      Source Code

      1. <a hidden="hidden" id="hover_bkgr_fricc" class="trigger_popup_fricc">popup</a>
      2. <div id="hover_bkgr_fricc" class="hover_bkgr_fricc">
      3. <span class="helper"></span>
      4. <div>
      5. <div class="popupCloseButton">×</div>
      6. <p>Uw jaarlijks verbruik is te laag om in aanmerking te komen.<br /><br /> Bedankt voor uw bezoek aan *******!</p>
      7. </div>
      8. </div>