meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Software Ontwikkelaar

De baan Als Backend Developer werk je aan ons product Twinfield. Een product dat een slimme samenwerking tussen Ondernemers en Accountants mogelijk maakt. Jij bent een vakman die Clean Coding hoog in het vaandel heeft. Je werkt in een team dat verantwoordelijk is vanaf ontwerp tot en met deployment. Samen met je Product Owner, je team en direct belanghebbenden stel je de Product Backlog op. 2 keer per jaar doen we dat met alle teams uit de hele wereld op 1 plek door middel van een Big Room Planning. Je werkt niet alleen de Product Backlog af, maar kijkt verder

Bekijk vacature »

Medior .Net ontwikkelaar met passie voor het vak e

Wegens de toenemende groei van business op development vlak zoekt deze partij naar een nieuwe ervaren ontwikkelaar met aantoonbaar trackrecord. Ze tellen een duizendtal man groot en jouw werklocatie zal in provincie Limburg zijn bij één van hun klanten of binnen het interne project team(afhankelijk waar jij het beste past). Het hart en teamgevoel maakt het verschil binnen de club en daar word veel waarde aan gehecht om het resultaat hoog te houden. Functie-omschrijving Het team waar je in komt te werken bestaat, met jou erbij, uit 7 man; Mediors en Seniors. Je hebt dus meer dan genoeg collega’s waar

Bekijk vacature »

PHP Developer / FinTech

Organisatie Tegenwoordig snoepen FinTech bedrijven veel marktaandeel weg van de traditionele banken. Wil jij graag in Hoofddorp werken bij een innoverende organisatie die de financiële markt op z’n kop zet? Deze organisatie gaat hard op zoek naar gedreven developers zodat ze hun groei bij kunnen houden! Net als AirBNB de hotelbranche op z’n kop zet en Tesla de autobranche overhoop gooit, doet dit bedrijf dat met de financiële markt! Met een directie die een succesvol verleden heeft in het bankwezen, bij onder andere Nederlands grootste banken, boekt het bedrijf sinds hun start 4 jaar geleden al prachtige resultaten. De core

Bekijk vacature »

Medior.Net Developer gezocht voor bedrijf die acti

Dit bedrijf is al een tijd actief op het gebied van het ontwikkelen van vastgoedsoftware. Het is een bedrijf dat blijft groeien en sinds kort ook op internationaal vlak actief is. De software wordt voornamelijk gebruikt door vastgoedbeleggers- en beheerders. Ze maken SAAS oplossingen die er voor zorgen dat dagelijkse werkprocessen worden geautomatiseerd. Het bedrijf heeft één vestiging en telt 9 FTE. De vestiging staat op een mooie locatie wat stimulerend werkt voor de inspiratie en ideeën van zijn werknemers. Functie-omschrijving Als Medior.Net Developer kom je terecht in een team van 6 ontwikkelaars, die allemaal een HBO werk- en denkniveau

Bekijk vacature »

Medior+ PHP developer gezocht in de omgeving Haarl

Vanuit een schoolopdracht is in 2008, door twee studenten, het idee ontstaan om de software wereld uit te breiden met een nieuw concept. Twee en een half jaar geleden is het concept werkelijkheid geworden en is nu al onmisbaar bij een aantal grote namen op de markt. Naast de ontwikkeling van apps en online software op de zakelijke markt weet dit bedrijf zich te onderscheiden van hun concurrenten door het leveren van een extra service. Zo wordt er gebruik gemaakt van een bedrijfskundige insteek. Samen met de klant neem je een stapje terug, wordt er gekeken naar de vraag, waar

Bekijk vacature »

Gouda / PHP Developer / Symfony

Voor een softwareontwikkelbedrijf nabij Gouda ben ik op zoek naar een PHP Developer. Takenpakket Het team waarin je terecht komt bestaat uit ontwikkelaars en strategisch denkers. Als team worden er apps, web apps en klantenportalen ontwikkeld met behulp van de meest recente technieken. Als PHP Developer werk je binnen het SCRUM-team met ervaren developers aan technische projecten en productontwikkeling voor de planning software van het bedrijf. Je takenpakket is divers en verdiepend: van technische consultancy opdrachten voor klanten tot het bepalen van de software architectuur, het automatisch tests schrijven tot het bouwen en documenteren. Per project weeg je af welke

Bekijk vacature »

Medior PHP developer Snelst groeiende modemerk

Ben jij iemand die het Symfony framework kan dromen en hier minimaal 3 jaar werkervaring mee heeft? Nederlands snelst groeiende luxe lifestyle is op zoek naar één ambitieuze medior developer die geen 9 tot 5 mentaliteit heeft en een serieuze stap wilt maken in zijn carrière. Wil jij een grote naam op je cv kunnen zetten die een enorme boost aan je carrière geeft, lees dan verder! Organisatie Ruim 4 jaar geleden is dit modemerk ontstaan door een aantal grote Nederlandse namen die hun kennis en passie voor mode hebben gecombineerd om een enorm succesvol modemerk neer te zetten. Het

Bekijk vacature »

Medior C#.Net Developer gezocht voor gezellig en k

Dit bedrijf heeft 15 jaar geleden het levenslicht gezien. Het is ontstaan door twee zakenmensen die met elkaar in contact zijn gekomen en uiteindelijk de krachten hebben gebundeld. Het is een dynamisch bedrijf en telt ongeveer 50 IT professionals die in dienst zijn op locatie bij de klant. Dit bedrijf onderscheidt zich in consultancy, omdat hun consultants persoonlijk zijn naar hun klanten. Ze werken vanuit één vestiging die gevestigd is in midden Nederland, super centraal dus! Dit bedrijf is persoonlijk naar haar klanten en werknemers en ook heerst er een positieve sfeer waarbij heel duidelijk het motto geldt ’’wie A

Bekijk vacature »

Junior Software Developer / Regio Amersfoort

Functieomschrijving Heb jij een hbo- of universitaire opleiding afgerond in de richting van ICT. Heb jij een passie voor techniek, affiniteit met software ontwikkeling en lijkt het jou gaaf om aan de slag te gaan bij een van de grootste (internationale) werkgevers van Nederland? Lees dan snel verder! Je bent verantwoordelijk voor het ontwikkelen van complexe software; Je neemt deel aan een uitstekend ontwikkeltraject waar relevante kennis, vaardigheden en ervaring wordt bijgebracht; Ook denk je mee over de optimalisatie van software, hiervoor sta je dicht bij de eindgebruiker waar jij mee in discussie gaat; Er wordt gewerkt met sprints van

Bekijk vacature »

Full-stack developer

Wil jij werken aan razend slimme technologische e-commerce oplossingen voor bekende namen? Lees snel verder.. Organisatie Met ruim 20 jaar aan ervaring en meer dan 80 specialisten werken zij hier voor grote, leuke en bekende namen. Als marktleider zetten we samen met onze klanten de nieuwe standaard en daarom zijn we op zoek naar collega’s die de lat ook telkens een stukje hoger leggen. Het team van developers, digital designers, strategen en accountmanagers staat dagelijks weer paraat om retailers klaar te maken voor de digitale toekomst. Dagelijks zien en gebruiken meer dan 65 internationale retailers, 5.000 (online) stores, 50.000 medewerkers

Bekijk vacature »

Software Developer Progress

Functieomschrijving Wil jij in een toonaangevende organisatie werken met de ambitie om de (inter-)nationale markt te bewerken? Reageer dan nu! Uitvoeren van analyses ter bevordering van de betrouwbaarheid en performance van de applicatie; Implementeren van functionaliteiten in eigen Back Office pakket; Meedenken over de architectuur en tevens waarborgen van de architectuur; Programmeren van functionele en technische wijzigingen; Bijwerken van documentatie; Troubleshooten van complexe incidenten; Aanroepen van webservices, message handling; Functie-eisen HBO/WO diploma; Bijzonder goed in woord en geschrift van zowel de Nederlandse en Engelse taal; 6+ jaar ervaring in software ontwikkeling; Zeer sterk analytisch vermogen; Ruime ervaring met Progress /

Bekijk vacature »

BI developer SQL Microsoft BI tooling

Functieomschrijving Heb jij passie voor het ontwikkelen van rapportages en heb je ervaring met SQL of T-SQL? Werk je graag in een organisatie waarin een uitstekende werk- privébalans is, en je de ruimte krijgt om jezelf verder te ontwikkelen? Lees dan snel verder! Ontwikkelen van rapportages (SSRS, Power BI, SQL); Requirements vergaren samen met financiële experts; Schrijven van technische en of functionele ontwerpen; Uitvoeren van data analyse; Uitvoeren van systeemtesten; Ontwikkelen van schermen en maken van scripts. Functie-eisen Een afgeronde HBO / WO opleiding; Je hebt ervaring met het ontwikkelen van rapportages m.b.v. SSRS; Heb je geen hands-on ervaring op

Bekijk vacature »

Opleidingstraject tot Software Developer / Regio A

Functieomschrijving Heb jij een hbo- of universitaire opleiding afgerond, heb jij een passie voor software ontwikkeling en lijkt het jou gaaf om een opleidingstraject te volgen tot Software Developer bij een van de grootste (internationale) werkgevers van Nederland? Lees dan snel verder! Je bent verantwoordelijk voor het ontwikkelen van (complexe) software; Je neemt deel aan een uitstekend ontwikkeltraject waar relevante kennis, vaardigheden en ervaring wordt bijgebracht op het gebied van software ontwikkeling; Ook denk je mee over de optimalisatie van software, hiervoor sta je dicht bij de eindgebruiker waar jij mee in discussie gaat; Er wordt gewerkt met sprints van

Bekijk vacature »

Lead Java Developer

Lead Java Developer Drachten / Meewerkend Voorman Haal jij veel energie van het leiden van solide java developers en hen te helpen groeien? Werk jij graag in een volwassen software engineering omgeving met een duidelijke focus op CI/CD, DevOps en Containerisation? Werk je graag aan systemen met een duidelijke impact op honderdduizenden consumenten? Hou jij van direct een vast contract en een salaris oplopend tot € 100.000 per jaar? Dan is dit de baan voor jou! Jouw organisatie: Hier werken betekent het werken aan zeer tastbare systemen die dagelijks door honderd duizenden consumenten worden gebruikt en dus een duidelijke impact

Bekijk vacature »

Business Intelligence developer

Jij ben niet bang om hard te werken. Uitdagingen zijn welkom. En problemen? Die zijn er om opgelost te worden of, nog beter, om voorkomen te worden! Voor jij aan de slag gaat met het ontwerpen van BI- en DWH-oplossingen, leg je eerst je oor te luister bij de klant. Zo weet jij wat de klant wil, en hoe jouw ontwerp eruit moet komen te zien. Simpel! Althans… met jouw Developer-kwaliteiten wel! Over deze BI vacature Als Business Intelligence Developer ga je zowel op locatie bij de klant aan de slag, als op een van de Sogeti-locaties. Je analyseert de

Bekijk vacature »
Joyce PHP

Joyce PHP

07/01/2019 09:57:21
Quote Anchor link
Hallo
Ik heb een pagina waar ik een modal wil oproepen gemaakt mbv het voorbeeld van W3schools
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="frame-back">
                    <p>Text</p>
                    <button id="myBtn">Klik om verder te lezen</button>
                </div>
            </div>
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p>Some text in the Modal..</p>
                </div>
            </div>
            <script src="script/modal.js"></script>]
en het script
[    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
        modal.style.display = "block";
    }
    span.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }


Nu wil ik meerdere links die een modal op moeten kunnen roepen op 1 pagina, maar dit werkt niet. (Eén enkele wel)
Ik heb geprobeerd om elk item een eigen nummer en script mee te geven, maar ook dat werkt niet. Hoe kan ik dit oplossen?

Hoe moet ik het shier cript invoeren, zodat het er als script uitziet?

Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 07/01/2019 13:17:36 door - Ariën -
 
PHP hulp

PHP hulp

16/01/2019 03:48:19
 
Jan te Pas

Jan te Pas

07/01/2019 12:50:19
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
    <title>Document Title</title>

    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Modal Example</h2>
    <!-- Trigger/Open The Modal -->
    <button class="myBtn_multi">Open Modal</button>
    <button class="myBtn_multi">Open Modal2</button>

    <!-- The Modal -->
    <div class="modal modal_multi">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close close_multi"></span>
            <p>Some text in the Modal..</p>
        </div>
    </div>

    <!-- The Modal -->
    <div  class="modal modal_multi">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close close_multi"></span>
            <p>Some text in the Modal..2</p>
        </div>
    </div>
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal.. 3</button>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">x</span>
            <p>Some text in the Modal. Example 3.</p>
        </div>
    </div>
    <script>
        // Get the modal

        var modalparent = document.getElementsByClassName("modal_multi");

        // Get the button that opens the modal

        var modal_btn_multi = document.getElementsByClassName("myBtn_multi");

        // Get the <span> element that closes the modal
        var span_close_multi = document.getElementsByClassName("close_multi");

        // When the user clicks the button, open the modal
        function setDataIndex() {

            for (i = 0; i < modal_btn_multi.length; i++)
            {
                modal_btn_multi[i].setAttribute('data-index', i);
                modalparent[i].setAttribute('data-index', i);
                span_close_multi[i].setAttribute('data-index', i);
            }
        }



        for (i = 0; i < modal_btn_multi.length; i++)
        {
            modal_btn_multi[i].onclick = function() {
                var ElementIndex = this.getAttribute('data-index');
                modalparent[ElementIndex].style.display = "block";
            };

            // When the user clicks on <span> (x), close the modal
            span_close_multi[i].onclick = function() {
                var ElementIndex = this.getAttribute('data-index');
                modalparent[ElementIndex].style.display = "none";
            };

        }

        window.onload = function() {

            setDataIndex();
        };

        window.onclick = function(event) {
            if (event.target === modalparent[event.target.getAttribute('data-index')]) {
                modalparent[event.target.getAttribute('data-index')].style.display = "none";
            }

            // OLD CODE
            if (event.target === modal) {
                modal.style.display = "none";
            }
        };

//XXXXXXXXXXXXXXXXXXXXXXX    Modified old code    XXXXXXXXXXXXXXXXXXXXXXXXXX

// Get the modal

        var modal = document.getElementById('myModal');

// Get the button that opens the modal
        var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
        var span = modal.getElementsByClassName("close")[0]; // Modified by dsones uk

// When the user clicks on the button, open the modal

        btn.onclick = function() {

            modal.style.display = "block";
        }

// When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }



    </script>

</body>
</html>
{/code]
 
Thomas van den Heuvel

Thomas van den Heuvel

07/01/2019 16:11:23
Quote Anchor link
Hoeveel modals mogen er tegelijkertijd open staan? Als dit maximaal één modal is voor alle links zou je de modal-container met id myModal kunnen hergebruiken en deze dynamisch kunnen vullen met de inhoud die je wilt tonen.

Ook zou je een library kunnen inzetten om dit werk wat makkelijker (en cross browser compatible) te maken. Als je van jQuery gebruik maakt is dit volgens mij zo gepiept.

Over de code van @Jan hierboven: dit lijkt mij nogal veel code voor iets relatief simpels? Waarom ken je de data-index attributen dynamisch toe? Deze kun je gewoon in HTML toevoegen?
 
Joyce PHP

Joyce PHP

07/01/2019 18:17:48
Quote Anchor link
Thanks guys.
Ik heb het opgalost via jquery, dat was uiteindelijk eenvoudiger
 
Jan te Pas

Jan te Pas

08/01/2019 10:47:02
Quote Anchor link
@Thomas, klopt, maar er staan twee methodes; dynamisch en ‘old’. Vooral bedoeld als leercode.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.