Popup Form Html/Jquery

[Qweljk]

Dear,

Ik ben voor school druk bezig met het maken van een website,
hiervoor gebruik ik html, css en jQ.
Nu wilde ik graag een popup form maken zodat mensen zich kunnen inschrijven voor een activiteit, maar dit wilt niet lukken.

Nu vroeg ik me af of iemand tips heeft hoe ik dit het beste aan zou kunnen pakken.

Kind regards.

[moijamie]

Volgens mij bedoel je modals.

Hier is een voorbeeld http://www.w3schools.com/bootstrap/bootstrap_modal.asp

[Qweljk]

dit was ik zelf nog niet tegengekomen, mijn dank is groot!

[RobIII]

Qweljk schreef op maandag 21 september 2015 @ 15:20:
maar dit wilt niet lukken.

Wil je dan voortaan even aangeven wat er niet lukt? "Het lukt niet" is geen probleemomschrijving Verder is het sowieso handig als je onze Quickstart hanteert bij 't openen van een topic. Je hebt nu een/het antwoord maar het had geholpen als je zelf had aangegeven waar je al op had gezocht, wat je had gevonden etc. Dan hadden we je ook kunnen helpen met 't verbeteren van je Google skills

[Qweljk]

RobIII schreef op maandag 21 september 2015 @ 15:54:
[...]

Wil je dan voortaan even aangeven wat er niet lukt? "Het lukt niet" is geen probleemomschrijving Verder is het sowieso handig als je onze Quickstart hanteert bij 't openen van een topic. Je hebt nu een/het antwoord maar het had geholpen als je zelf had aangegeven waar je al op had gezocht, wat je had gevonden etc. Dan hadden we je ook kunnen helpen met 't verbeteren van je Google skills

Zeer dank voor de tips voor het posten.
Ik moet erbij zeggen dat dit mijn tweede post is op een formeler forum/ website,
en even moet wennen op wat voor manier het gebruikelijker is om te posten

ontopic:

Het probleem is nog niet opgelost maar ik heb nu een mogelijk goede oplossing, dus ik puzzel nog even verder

[Qweljk]

moijamie schreef op maandag 21 september 2015 @ 15:21:
Volgens mij bedoel je modals.

Hier is een voorbeeld http://www.w3schools.com/bootstrap/bootstrap_modal.asp

Ik heb nu een modal gemaakt, maar deze lijkt niet te openen.
Nadat ik de class 'modal' verwijderd had, kwam hij tevoorschijn, maar wanneer deze class wel aanwezig is komt hij niet op nadat ik op mijn knopje gedrukt heb.
Ook niet nadat ik een jQ geschreven heb, die als volgt is:

$('.popupbut').click(function () {
$('##Regmodal').modal({
show: true,
closeOnEscape: true
});
});

De modal heb ik als volgt geschreven:

<div class="modal" id="#Regmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Register now!</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Is er een eventuele fout die ik hierin gemaakt heb, of een eventuele andere oplossing?
(Overigens zijn alle tips welkom voor een beginnende web developer)

Zelf heb ik gekeken naar een oplossing met Javascript, maar het leek mijzelf gemakkelijker de input boxes binnen html te schrijven.

[skate master]

Heb je wel het bootstrap framework geladen of gebruik je enkel de html voor de modal?

Overigens heb je volgens mij een # teveel staan in je jquery script.

[sig69]

Zo te zien gebruik je een bootstrap modal, beter startpunt is dan: http://getbootstrap.com
Edit: maar je hoeft hier niet een heel framework voor in te laden natuurlijk, als je je form gewoon in een hidden div zet en die zichtbaar maakt met jQuery ben je er ook al.

[ Voor 49% gewijzigd door sig69 op 22-09-2015 09:25 ]

[Qweljk]

skate master schreef op dinsdag 22 september 2015 @ 08:10:
Heb je wel het bootstrap framework geladen of gebruik je enkel de html voor de modal?

Overigens heb je volgens mij een # teveel staan in je jquery script.

Ik heb het framework geladen in de header
De # teveel was me nog niet opgevallen , dit maakte overigens geen verschil helaas

[SavageNL]

Je hebt ook een # teveel in je id. Je id hoort geen # te hebben, je selector wel.
$('#x') betekent 'selecteer element met id x'.

Verder, krijg je een foutmelding in je JavaScript console of wat gaat er precies fout? Als je iets als https://jsfiddle.net/ gebruikt kun je makkelijk laten zien wat je hebt.

[Qweljk]

SavageNL schreef op dinsdag 22 september 2015 @ 11:28:
Je hebt ook een # teveel in je id. Je id hoort geen # te hebben, je selector wel.
$('#x') betekent 'selecteer element met id x'.

Verder, krijg je een foutmelding in je JavaScript console of wat gaat er precies fout? Als je iets als https://jsfiddle.net/ gebruikt kun je makkelijk laten zien wat je hebt.

Hierbij mijn code in JSfiddle:
https://jsfiddle.net/a3wrtn0j/

Overigens krijg ik geen foutmelding over de JS, het probleem is dat wanneer ik een div in een modal, of een hidden div maak, het niet lukt om hem visible te krijgen, hetzelfde probleem heb ik met een modal.
Ik ben op het moment verschillende opties aan het uitproberen om te kijken of het toch wil lukken.

[RobIII]

Qweljk schreef op dinsdag 22 september 2015 @ 11:33:
Hierbij mijn code in JSfiddle:
https://jsfiddle.net/a3wrtn0j/

Begin eens met 't strippen van code totdat je een minimale testcase hebt om je probleem te reproduceren. Je code/fiddle bevat *waaay too much fluff* om als buitenstaander doorheen te worstelen. Er zijn altijd wel masochisten die hiermee aan de slag gaan, maar als je snel geholpen wil worden zorg je dat je je probleem in een paar regels code uitlegt en reproduceert; al het onnodige laat je weg.

[Qweljk]

RobIII schreef op dinsdag 22 september 2015 @ 11:53:
[...]

Begin eens met 't strippen van code totdat je een minimale testcase hebt om je probleem te reproduceren. Je code/fiddle bevat *waaay too much fluff* om als buitenstaander doorheen te worstelen. Er zijn altijd wel masochisten die hiermee aan de slag gaan, maar als je snel geholpen wil worden zorg je dat je je probleem in een paar regels code uitlegt en reproduceert; al het onnodige laat je weg.

Hierbij heb ik mijn code gestript tot hetgene waar het probleem zich vrijwel zeker moet bevinden,
in het bovenste gedeelte staan mijn plugins, deze heb ik laten staan stel er zijn plugins die niet met elkaar zouden kunnen samenwerken (Het lijkt me sterk, maar ik heb hier nog onvoldoende verstand van).
Hetzelfde geldt voor mijn JS/ jQ, mocht hier evt. een soortgelijk probleem kunnen zijn.

https://jsfiddle.net/a3wrtn0j/2/

Iig, opnieuw mijn dank

[Qweljk]

Oh, het is gelukt!
Ik heb in de css de visibility van een div op hidden gezet, en daarna in de jQ het volgende:
$('.popupbut').click(function () {
$('.upupform').css("visibility","visible")
});

Hierna deed hij het.
Ik had dit eerder geprobeerd maar waarschijnlijk had ik daarin een typfout gemaakt.

Mijn dank voor ieder hun reactie

(Stel iemand heeft nog een tip voor een beginnende web developer zijn ze uiteraard van harte welkom)

[Jogai]

Als je in je css het volgende gebruikt:

Cascading Stylesheet:

display: none

Dan kun je in jQuery het volgende doen:

JavaScript:

$('.upupform').show();

Nog wat tips:
Gebruik in het forum de juiste tags zoals: Overzicht van UBB-codes #tag_code
Haal je javascript door een linter, bv: http://www.jslint.com/
Know your framework, heel je probleem is al opgelost binnen bootstrap: http://getbootstrap.com/javascript/#modals
Je had dus geen regel javascript hoeven schrijven...
Tips voor beginnende web-dev zijn op veel plaatsen te vinden. Je vraag ging over een schoolopdracht. Iets maken om door school te komen of developer willen zijn is een wereld van verschil..