meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

beheerder meldkamersystemen

Wat ga je doen? Als beheerder meldkamersystemen ben jij samen met jouw collegaâ..s een essentiële schakel op het gebied van openbare orde en veiligheid. Je beheert en implementeert de geautomatiseerde informatiesystemen om de werkprocessen van de meldkamers te ondersteunen en verbeteren. Ook adviseer je de meldkamermedewerkers over de mogelijkheden van informatiesystemen en vertaalt hun behoefte richting de techniek. Daarnaast wordt er hard gewerkt aan één Landelijke Meldkamerorganisatie (LMS). Dat betekent een reorganisatie van zoâ..n 20 regionale meldkamers naar maximaal 10, waarbij de meldkamers intensiever moeten samenwerken. Ook de systemen en infrastructuur moeten hierop worden aangepast. Een uitdagende job, waarbij wij

Bekijk vacature »

C# developer gezocht (Webdevelopment, CORE, Xamari

Voor een bedrijf in Capelle aan den IJssel zijn we momenteel op zoek naar een .NET C# developer. Het gaat om een organisatie van circa 15 mensen waarvan 7 .NET ontwikkelaars. Het bedrijf richt zich op drie door hun ontwikkelde (web & app) producten in verschillende niche markten. Van deze systemen is met name één systeem erg succesvol en volop in ontwikkeling. Met een dominante positie in de Benelux als basis, zijn ze momenteel bezig het systeem verder uit te rollen in de rest van Europa en daarbuiten. Tevens werken ze aan nieuwe toepassingen van dit systeem om andere afzetmarkten

Bekijk vacature »

Android Developer vacature

Je bent creatief. Je wilt verschil maken. Je gaat voor mobile. Voor het bedenken, ontwerpen en realiseren van sterke mobile-apps mag men jou ’s nachts wakker maken. Android Development Professional Jij weet hoe je Android-apps met impact ontwikkelt en levert ze op tijd af. Of het nu gaat om betalen met een vingerafdruk, het delen van de bar-rekening of het mobiel aanpassen van de (sfeer-)verlichting in huis, jij weet welke integrale functionaliteiten toegevoegde waarde hebben voor de eindgebruiker. Jij zorgt er bovendien voor dat jouw apps het toonbeeld zijn van gebruikersvriendelijkheid en veiligheid. Omdat je breed georiënteerd bent, kun je

Bekijk vacature »

UX/ Front-end Developer

Organisatie Voor een van mijn klanten uit Almaar ben ik opzoek naar een UX Designer met Front-end ontwikkeling ervaring. Dit bedrijf werkt voor B2B en B2C bedrijven en dragen bij aan hun succes door de slimme online oplossingen toe te passen. Processen automatiseren, meer potentiële klanten genereren en een optimale klantbeleving is waar dit bedrijf voor zorgt. Vanaf het begin wordt er een roadmap in kaart gebracht samen met de klant en dit is het begin voor meer succes. Digitale platformen zijn een van de diensten die ze aanbieden, hoewel de focus van de fysieke naar de online wereld verschoven

Bekijk vacature »

Junior PHP developer

Bedrijfsinformatie Deze jonge, informele organisatie is op zoek naar een versterking. Ze geloven in het intern opleiden van ontwikkelaars zodat ze op de lange termijn onderdeel kunnen worden van dit hechte team van zo’n 15 medewerkers. Dit is dus jouw kans! Deze organisatie is sinds 5 jaar flink aan de weg aan het timmeren maar wil ook klein blijven om zo het hechte teamverband te behouden. Je moet er dus op tijd bij zijn voor deze functie! Deze organisatie specialiseert zich tweeledig: Enerzijds maken ze websites en anderzijds webshops. Hierin hebben ze een aantal grote klanten in de commerciële sector

Bekijk vacature »

Zelfstandige PHP Developer

Organisatie Dit bedrijf is 9 jaar geleden opgestart door twee zussen die de resultaten van kinderen op de basisschool een boost wilden geven. 9 jaar later zijn ze uitgegroeid tot marktleider en hebben ze een monopoly in hun vakgebied. Er werken op dit moment 8 hele gezellige dames er samen aan om het basisschool onderwijs in Nederland beter te maken. Op dit moment maakt 60% van de Nederlandse scholen gebruik van hun cursussen. Je werkt dus samen aan een maatschappelijk doel! Functie Binnen deze organisatie hebben ze al een tijdje een eigen CMS systeem wat niet meer van deze tijd

Bekijk vacature »

Java Backend Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java Developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en werk je mee aan de architectuur laag. Daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het software ontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je ondersteunt de software architect en projectleider bij hun werkzaamheden. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak

Bekijk vacature »

Ervaren C# developer voor nieuwe software omgeving

Heb jij ervaring met de allernieuwste technieken rondom een Microsoft omgeving? Voor een organisatie in de omgeving van Baarn ben ik op zoek naar een software developer die meer dan 4 jaar ervaring heeft met C# en .NET. Je gaat werken bij een platte organisatie met een informele setting. Deze organisatie werkt met open deuren en is erg transparant. De medewerkers zijn down to earth en ze organiseren diverse teamuitjes. Daarnaast hebben ze ook diverse Gameruimtes waar je de mogelijkheid hebt om te pokeren en te poolen. Deze organisatie valt onder een grote internationale investeringsbureau, echter heb je het gevoel

Bekijk vacature »

C# Developer

Are you a C# Developer with affinity for the automotive industry? Do you love to (further) develop business-critical software and play your part in lifting the automotive industry to a new technological level? If so, you might be the person we're looking for! To strengthen our client's IT team in Hilversum, we are looking for a C# Developer who will be co-responsible for building and maintaining integrations for their business-critical software focussing on Dealer Management Systems, Distribution Software, Parts Management Systems and Electronic Document Management. Apart from building, improving and testing the software, you will also take responsibility in documenting

Bekijk vacature »

Medior C# developer Consultancy

Ken je dat gevoel dat je stagneert in je werkzaamheden en dat je geen ruimte hebt om jezelf te kunnen blijven ontwikkelen? Dat je voor de zoveelste keer aan een project wordt toegewezen die niet geheel bij jouw interesses past? Dat er direct van je wordt verwacht om de rol als architect te vervullen, terwijl je als senior het liefst zelf aan de knoppen draait? En wil jij graag het beste jongetje zijn van de klas? Dan heb ik de buitenkans waar jij op hebt gewacht! Organisatie Voor een van mijn opdrachtgevers ben ik op zoek naar een echte Champions

Bekijk vacature »

Frontend Developer Ik wil met de nieuwste techniek

Wie droomt er nou niet van om midden in de natuur zijn werk te kunnen doen? Jouw werkplek is namelijk in een oud landhuis in het bos! Terwijl jij bezig bent met een van de toffe projecten die jullie draaien hoor jij de vogeltjes lekker op de achtergrond fluiten. Af en toe zie jij door het raam een konijntje langs huppen, terwijl jij bezig bent met jouw carrière een boost te geven. Jij bepaald namelijk binnen deze organisatie waar jouw carrière heen gaat. Of je nou full stack applicaties of front-end maatwerk applicaties voor web & mobile wilt ontwikkelen of

Bekijk vacature »

Back-end junior C# .NET developer in regio Cuijk

Organisatie Voor een van mijn business partners uit de regio van Cuijk ben ik op zoek naar een C# back-end developer. Het bedrijf bestaat 12 jaar en is begonnen als websitebouwer. Inmiddels maken ze namelijk naast websites en webshops ook ERP systemen, portals voor samenvoeging van verschillende systemen en een aantal eigen producten. Daarnaast focussen ze zich veel op internetmarketing. Voor zowel het MKB als de groot zakelijke markt leveren ze maatwerk software-oplossingen. Samen met hun andere vestiging in Oost-Europa bedienen ze één klantenbestand. Het is een informeel bedrijf, waar je veel vrijheid krijgt, maar tegelijkertijd wordt er ook heel

Bekijk vacature »

Junior PHP Developer / International Startup

Organisatie Wil jij graag onderdeel worden van een enorm succesvolle startup, gevestigd in Amsterdam, met kantoren in Londen en Ibiza. Deze organisatie heeft een innovatieve evenementen agenda ontwikkeld en dient daarmee als marketing platform voor grote evenementen. Wil jij vanuit een jonge startup graag samen werken met ’s werelds grootste evenementen, bedrijven als Uber en Booking.com en onderdeel worden van deze gave startup, lees dan verder! Deze organisatie heeft een platform ontwikkeld waarbij grote evenementen zich aanmelden en op dit platform adverteren richting miljoenen consumenten die de app gebruiken. Enkele jaren geleden is deze organisatie ontstaan en zitten inmiddels met

Bekijk vacature »

Junior backend PHP developer

Werk jij graag voor Nederlands meest bekeken televisie zenders? Wil jij graag een groot netwerk in de mediabranche opbouwen? Werk jij graag met de nieuwste technieken werken om ervoor te zorgen dat deze high traffic websites goed functioneren? Organisatie Altijd al willen werken voor de gaafste televisie programma’s? Werk je graag in een gezellig drukke omgeving, met een jong team aan de gaafste websites van Nederland die iedereen kent van televisie! Dan zit je op het Mediapark in Hilversum goed bij deze tv zender! Deze televisie zender is een van de meest bekeken kanalen op de Nederlandse televisie. Werken bij

Bekijk vacature »

Junior, medior of senior .NET C# ontwikkelaar, com

Ben je als junior, medior of senior .NET ontwikkelaar op zoek naar een analytische omgeving? Waar hoogopgeleiden en ervaren collega’s jouw kennis naar een hoger niveau kunnen tillen? Waar je met een leuk team samen aan innovatieve producten werkt? Dan zou de deze organisatie wel eens goed bij je kunnen passen. Voor een organisatie in Delft zoeken we momenteel een junior, medior of senior .NET C# ontwikkelaar. De organisatie richt zich zowel op websites als complexe maatwerk applicaties voor externe klanten. Tevens moet je (afhankelijk van je niveau) mee kunnen denken met functionele en architectonische vraagstukken. De projecten kunnen erg

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

25/04/2019 04:56:25
Honeypot
 
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.