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:


    script.js:


  • Volgens mij ben je al een heel eind. Waar loop je nu op vast? Of wat zou er anders moeten werken dan nu gebeurt?


    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
    #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
    $().ready(function() {
        $('body').append('<div id="popup-overlay" onclick="..."></div>');
        $('... selector ...').click(function() {
            $('#popup-overlay').fadeTo('slow', '0.7');
        });
    });

    (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
    <script type="text/javascript">
        function submit()
        {
            document.getElementById("hover_bkgr_fricc").click(); 
    document.submitForm.submit(); 
        }
    </script>

    html:

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

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!