• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. Javascript + Ajax

Forum

  • Beta-testers gezocht voor Crypto-oefenplatform

    Syntax 29 januari 2026 om 16:11
  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Syntax 19 januari 2026 om 09:34
  • Developer Gezocht

    Mikevdk 10 januari 2026 om 18:57
  • Op zoek naar de legends

    Syntax 5 januari 2026 om 13:50
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09
  • Help testers nodig voor android app Urgent

    urgentotservices 26 september 2025 om 10:21
  • Versio vervanger

    Jeroen.G 25 augustus 2025 om 15:56
  • Afspraken systeem met planbeperking

    Lijno 1 augustus 2025 om 23:04

Marktplaats

  • 321 Nieuwe Domeinnamen December 2025

    shiga 1 januari 2026 om 10:26
  • Meerdere mafia game template te koop

    Syntax 26 december 2025 om 00:07
  • Van een pixelige afbeelding naar een strakke, moderne website

    Syntax 21 december 2025 om 17:05

jquery popup na form post

  • Givesomeluck
  • 29 november 2016 om 18:17
  • Givesomeluck
    Beginner
    Berichten
    6
    • 29 november 2016 om 18:17
    • #1

    Goede dag

    Ik ben de laatste dagen weer druk bezig met het onder de knie krijgen van scripten aangezien ik er een lange tijd uit geweest ben en nu was mijn idee om javascript / jquery ook te gaan leren maar nu wil ik als er een "form post" gedaan is bijvoorbeeld bij aanmelden dat er een "popup" komt met de informatie ofzo

    iemand een voorbeeld van hoe het kan /werkt zodat ik het stap gewijs kan door nemen zodat ik precies weet hoe ik zoiets moet maken

    Groetjes michael

  • MOnkNL
    Student
    Ontvangen Reacties
    8
    Berichten
    69
    • 29 november 2016 om 19:38
    • #2

    Waar je naar zoekt lijkt: https://jqueryui.com/dialog/
    Maar wil je mensen vanuit een 'popup' laten inloggen of na inloggen een popup komt of dat je alleen foutmeldingen geeft via de popup. Dat kan ik op dit moment niet uit je vraag halen.

    Verder is dialog wel een van de makkelijkere functies om zelf te 'maken' op basis van jquery.

    edit:
    Als een form word verzonden en je wil iets doen met jquery moet je het event tegen houden:

    JavaScript
    $(document).on("submit", "form", function(event){ //Als welk formulier dan ook word verzonden.
    			console.log($( this ).serialize()); //Toon form input in console log
    			event.preventDefault(); //Verzend het form niet. 
    		});

    The law is what I write down on paper

    Bewerkt één keer, laatst door MOnkNL (29 november 2016 om 19:56).

  • Givesomeluck
    Beginner
    Berichten
    6
    • 29 november 2016 om 21:30
    • #3
    Citaat van MOnkNL

    Waar je naar zoekt lijkt: https://jqueryui.com/dialog/
    Maar wil je mensen vanuit een 'popup' laten inloggen of na inloggen een popup komt of dat je alleen foutmeldingen geeft via de popup. Dat kan ik op dit moment niet uit je vraag halen.

    Verder is dialog wel een van de makkelijkere functies om zelf te 'maken' op basis van jquery.

    edit:
    Als een form word verzonden en je wil iets doen met jquery moet je het event tegen houden:

    JavaScript
    $(document).on("submit", "form", function(event){ //Als welk formulier dan ook word verzonden.
    			console.log($( this ).serialize()); //Toon form input in console log
    			event.preventDefault(); //Verzend het form niet. 
    		});

    ik bedoel dus wat na de "submit" komt de foutmelding enzo dus de dingen dat komt na de php update zeg maar

  • MOnkNL
    Student
    Ontvangen Reacties
    8
    Berichten
    69
    • 29 november 2016 om 22:09
    • #4

    Oke ik doe in geen enkele vorm van validatie. Voorbeeld draait alleen maar om dialoog en hoe je die start bij laden van de pagina online: http://ict.thomasvv.nl/24158-onsubmit/onsubmit.php
    Code in het kort:

    PHP
    <?php	if(isset($_POST['email'])){ ?>
    	<script language="javascript" type="text/javascript">
    		$( function() {
    			$( "#dialog" ).dialog();
    		});
    	</script>
    	<div id="dialog" title="Basic dialog">
    		<p>This is the default dialog which is useful for displaying information. 
    		The dialog window can be moved, resized and closed with the 'x' icon.</p>
    	</div>
    <?php 	}	?>
    Toon Meer

    The law is what I write down on paper

  • Givesomeluck
    Beginner
    Berichten
    6
    • 29 november 2016 om 22:57
    • #5
    Citaat van MOnkNL

    Oke ik doe in geen enkele vorm van validatie. Voorbeeld draait alleen maar om dialoog en hoe je die start bij laden van de pagina online: http://ict.thomasvv.nl/24158-onsubmit/onsubmit.php
    Code in het kort:

    PHP
    <?php	if(isset($_POST['email'])){ ?>
    	<script language="javascript" type="text/javascript">
    		$( function() {
    			$( "#dialog" ).dialog();
    		});
    	</script>
    	<div id="dialog" title="Basic dialog">
    		<p>This is the default dialog which is useful for displaying information. 
    		The dialog window can be moved, resized and closed with the 'x' icon.</p>
    	</div>
    <?php 	}	?>
    Toon Meer

    Dankje wel hier kom ik wel verder mee!!

  • Givesomeluck
    Beginner
    Berichten
    6
    • 29 november 2016 om 23:23
    • #6

    Na een beetje puzzelen is het al wel gelukt maar heb nog een vraagje

    de breedte van het dialoog kan je dat ook nog aanpassen want heb in de js al dingen aangepast van de width maar het blijft dat kleine vierkantje!!

    Groetjes

  • MOnkNL
    Student
    Ontvangen Reacties
    8
    Berichten
    69
    • 29 november 2016 om 23:30
    • #7

    Ja dat kan zie: http://api.jqueryui.com/dialog/#option-minWidth

    The law is what I write down on paper

  • MOnkNL
    Student
    Ontvangen Reacties
    8
    Berichten
    69
    • 30 november 2016 om 08:48
    • #8

    Na aanleiding van je vraag via privé bericht:

    Citaat van Givesomeluck

    Dankje voor je reactie kom er veel verder mee!!!
    heb alleen nog 1 klein vraagje kan je met die "plugin" ook de
    achtergrond om de popup heen zwart maken ? of is dat onmogelijk daar mee

    Je kan een handeling toevoegen als open event word aangeroepen.
    Dus

    JavaScript
    $( "#dialog" ).dialog({
    open: function(){}
    });

    Nu wil je natuurlijk dat de 'overlay' ook verdwijnt als je dialog sluit.

    Code
    $( "#dialog" ).dialog({
    close: function(){}
    });


    Als je dit dan koppelt aan een div met id overlay
    Krijg je:

    HTML
    <style>
    #overlay{
    	z-index:99; /* Dialog heeft een z-index van 100  */
    	background:rgba(0,0,0,0.5); /* Zwarte overlay die voor 50% doorzichtig is */
    	position:fixed; /*Zorg ervoor dat hij de gehele pagina kan beslaan */
    	top:0; /* positie start Y-as */
    	bottom:0; /* positie eind Y-as */
    	left:0; /* positie start X-as */
    	right:0;  /* positie eind X-as */
    	display:none; /* als de pagina word geopent willen we de overlay nog niet zichtbaar hebben */
    }
    </style>
    <script>
    $( "#dialog" ).dialog({
    	open: function(){
    		$('#overlay').show();
    	},
    	close: function(){
    		$('#overlay').hide();
    	}
    });
    </script>
    <div id="overlay">
    </div>
    <div id="dialog" title="Basic dialog" style="display:none;">
                      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>
    Toon Meer

    Online voorbeeld: http://ict.thomasvv.nl/24158-onsubmit…th_overlay.html

    The law is what I write down on paper

  • Givesomeluck
    Beginner
    Berichten
    6
    • 1 december 2016 om 17:10
    • #9

    Dankje wel voor je reactie hier kom ik ver mee nogmaals dankje!!

Participate now!

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

Maak een account aan Login

ICT Nieuws

  • Fijne feestdagen

    tcbhome 28 december 2025 om 13:55
  • Kritieke update voor Really Simple Security-plug-in

    K.Rens 16 november 2024 om 16:12
  • ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

    K.Rens 2 november 2024 om 16:09

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacy Policy
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design