jQuery - open Modal via id, en geef waarde terug voor die id

[Verwijderd]

Beste mensen, ik zit al de hele dag te prutsen met een modal.

Wat probeer ik te bereiken? In mijn html-pagina heb ik 6 verschillende gekleurde blokjes (div's met elk een uniek id) en als ik daarop klik, dan opent een modal. So far zo good, Ik kan ook nog een alert maken, zodat je kan zien op welk van de 6 blokjes geklikt is, want dat heb ik denk ik nodig voor het vervolg. Dat doe ik met de volgende code:

code:

<div id="box1"></div><div id="box1kleur"></div>
<div id="box2"></div><div id="box2kleur"></div>
<div id="box3"></div><div id="box3kleur"></div>
<div id="box4"></div><div id="box4kleur"></div>
<div id="box5"></div><div id="box5kleur"></div>
<div id="box6"></div><div id="box6kleur"></div>

$('#box1').click(function() {  
      $('#largeModal').modal('show');
            id = $(this).attr('id');
            alert(id);
    });

...

Alleen de jquery voor box1 staat hier even, maar die is voor de 5 andere blokjes hetzelfde (op het id na dan) dus die staat daar dan nog onder. Ook niet echt mooi lijkt me, kan vast ook in 1 functie met een extra variabele, maar goed, dit is nog wel te doen voor 6 blokjes totaal.

Op de modal staan 100 verschillende blokjes met kleuren en namen. Nu wil ik dat wanneer op zo'n blokje uit de modal geklikt wordt, het corresponderende blokje (bijvoorbeeld box2) uit de html-pagina de waarde van het geklikte blokje op de modal terugkrijgt en dat de bijbehorende naam wordt doorgegeven naar box2kleur, en de modal vanzelf sluit.

Nu werkte ik eerst met een Colorbox lightbox met daarin een iframe en dat werkte goed. Dan maakte ik van elk van die 100 blokjes een a href link zoals

code:

<a href="#" onclick="parent.document.naamformulier.kleurveldje.value='Skyblue'; parent.jQuery.colorbox.close(); return false; "><div style="width:60px;height:30px;background-color:#d9cdb2">&nbsp;</div><div style="margin-top:2px;">Skyblue</div></a>

Het verschil hierbij was dat er maar 1 kleurveldje was dus kon ik altijd de waarde daar naartoe sturen. Nu is het wat anders met deze modal, want de juiste kleur en naam moeten wel naar het juiste boxje worden gestuurd die de modal tevoorschijn toverde. Misschien kan het ook wel in de jquery functie erbij van de 6 boxjes, maar dan moet hij tijdens het uitvoeren van de functie doorhebben waar er in de modal op wordt geklikt. Maar dat is me allemaal helaas nog niet gelukt na een dag en avondje prutsen.

Weet iemand een zetje in de goede richting?

[Hiroj]

Om te beginnen kun je beter voor iedere div waarin jij een ID vermeld een class="modal-box" o.i.d. erbij plaatsen. Zo hoef je niet voor iedere box een apart stukje jQuery te schrijven

code:

<div id="box1" class="modal-box"></div>
<div id="box2" class="modal-box"></div>
<div id="box3" class="modal-box"></div>

$('.modal-box').click(function(){
    $('#largeModal').modal('show');
        var id = $(this).attr('id');
        alert(id);
});

Verwijderd schreef op donderdag 12 januari 2017 @ 20:04:
...

Op de modal staan 100 verschillende blokjes met kleuren en namen. Nu wil ik dat wanneer op zo'n blokje uit de modal geklikt wordt, het corresponderende blokje (bijvoorbeeld box2) uit de html-pagina de waarde van het geklikte blokje op de modal terugkrijgt en dat de bijbehorende naam wordt doorgegeven naar box2kleur, en de modal vanzelf sluit.

...

Verder begrijp ik nu niet zo goed, wat je hiermee bedoeld (het is nog vroeg voor mij).

[Verwijderd]

Dank je Hiroj, het is gelukt! Ik heb het als volgt gedaan:

code:

<div id="box1" class="basis-box"></div><div id="box1kleurnaam">kleur 1</div><br>
<div id="box2" class="basis-box"></div><div id="box2kleurnaam">kleur 2</div><br>
<div id="box3" class="basis-box"></div><div id="box3kleurnaam">kleur 3</div><br>

<div class="modal fade" id="largeModal">
  <div class="modal-box" data-kleur="#4bbfe5" data-kleurnaam="skyblue">modal boxje 1</div>
  <div class="modal-box" data-kleur="#ff0000" data-kleurnaam="rood">modal boxje 2</div>
  <div class="modal-box" data-kleur="#00ff00" data-kleurnaam="groen">modal boxje 3</div>
  <div class="modal-box" data-kleur="#0000ff" data-kleurnaam="blauw">modal boxje 4</div>
</div>

$('.basis-box').click(function() { 
    $('#largeModal').modal('show');
    boxid = $(this).attr('id');  // var ervoor kan hier niet, anders zie de volgende functie hem niet
});

$('.modal-box').click(function() {
    var datakleur = $(this).data('kleur');
    var datakleurnaam = $(this).data('kleurnaam');
    $('#largeModal').modal('hide');
    divboxid = '#'+boxid;
    divboxkleurnaam = '#'+boxid+'kleurnaam';
    $(divboxid).css('background-color', datakleur);
    $(divboxkleurnaam).html(datakleurnaam);
    // en nog wat acties :-)
});

[ Voor 190% gewijzigd door Verwijderd op 13-01-2017 13:35 ]

[q-enf0rcer.1]

Even om nog te reageren op je commentaar, als je de code goed wilt schrijven zou je ergens voor de jQuery functies de var wel moeten declaren. Anders is je code niet valid. Het gebruiken van global vars in JavaScript kan onverwachte situaties opleveren.

[Hiroj]

Verwijderd schreef op vrijdag 13 januari 2017 @ 09:15:
Dank je Hiroj, het is gelukt! Ik heb het als volgt gedaan:

Blij om te lezen dat het je in de tussentijd al gelukt is!