meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Embedded Developer mobility start-up in Ams

Senior Embedded Developer needed for fast growing mobility start-up in Amsterdam Join one of Europe’s most innovative and fastest growing electric mobility start-ups, aiming to revolutionise two wheeled transport. They believe that city mobility should be clean, beautifully designed and completely integrated with the technologies that we use everyday. You’ll be part of an embedded engineering dream team, building a range of in-vehicle softwares in-house and from scratch, that are completely unique. This organisation is completely different to your normal Tier 1 supplier or OEM. Here you’ll be able to work on multiple unique ECUs, set your own processes and

Bekijk vacature »

Front-end developer

Jij weet wat er nodig is. Jouw hart gaat sneller kloppen van techniek. Jij wil vooruit. Ben jij de Front-end Developer die we zoeken? Je bent creatief, thuis in gebruikersinteractie en een gedreven engineer in hart en nieren. Daarnaast heb jij een klantgerichte en proactieve houding. Precies de kwaliteiten die een Front-end Developer nodig heeft. Wat doe je als Developer? Als Front-end Developer werk je aan de technische realisatie van front-end (web)applicaties in de verschillende uitdagende opdrachten voor Sogeti’s klanten. Dit kan zowel op klantlocatie zijn, als binnen het Center of Excellence van Sogeti. Jij houdt van het uitdenken en

Bekijk vacature »

Medior Business Process management developer

Functieomschrijving In 2015 startte de Belastingdienst een ingrijpend meerjarig veranderprogramma; de Investeringsagenda. Inzet is te zorgen voor een Belastingdienst die beter, goedkoper en meer in control is. Jij ondersteunt de Belastingdienst in deze strategische doelstellingen met je expertise en de modernst denkbare infrastructuur. Als Business Process Management Developer werk je in een internationaal, jong en dynamisch team dat gewend is om te werken met korte prints én deadlines. jij focust op het verbeteren van jezelf, jouw team én de Belastingdienst. Functie-eisen je hebt een hbo werk- en denkniveau en bij voorkeur een diploma in een voor de functie relevante opleiding

Bekijk vacature »

Java Developer

Jij volgt ontwikkelingen op de voet. Sterker nog: je bent er een onderdeel van. Jij loopt voorop. Jij denkt met klanten mee en helpt hen innoveren. Zo kun jij een bijdrage leveren aan de Rabobank-app, de beveiliging van treinen voor Pro-rail verbeteren of de website van ING een boost geven. Vergaderen? Liever gewoon zorgen dat het werkt! Hoe omschrijft men een Sogetist? Gedreven, resultaatgericht en niet snel tevreden. Wat niet wil zeggen dat je nooit met hem of haar kunt lachen. Integendeel. Plezier hoort wat ons betreft net zo goed bij werken. Maar we gaan op de eerste plaats voor

Bekijk vacature »

Senior Python Developer

We are looking for a Senior Python Developer. Your primary focus will be the development of all server-side logic, ensuring high performance and responsiveness to requests from the front-end. You will also be responsible for integrating the front-end elements built by your co-workers into the application; therefore, a basic understanding of front-end technologies is necessary as well. Responsibilities: Writing reusable, testable, and efficient code Design and implementation of low-latency, high-availability, and performant applications Integration of user-facing elements developed by front-end developers with server side logic Implementation of security and data protection Integration of data storage solutions Requirements: Strong experience with

Bekijk vacature »

Internationaal Business Developer manager - Den Ha

Internationaal Business Developer manager - Den Haag- €45k-€70K Wat ga je doen als Internationaal Business Developer manager ? Je bent verantwoordelijk voor de resultaten van de salesorganisatie. Enerzijds geef je daarbij de salesorganisatie vorm (zowel strategisch als operationeel), anderzijds werk je zelf actief mee aan het ontwikkelen en uitdiepen van de markt. Je hebt een goed inzicht in de markt en volgt de laatste trends en ontwikkelingen, daarbij weet je de trends ook terug te vertalen naar kansen voor het bedrijf. Verder ben je verantwoordelijk voor zowel het genereren van new business als het onderhouden van bestaande relaties en weet

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 »

Functioneel applicatiebeheerder

Wij zoeken een ervaren enthousiaste IT collega Ben jij de ervaren applicatiebeheerder en proactieve teamplayer die gebruikers kan helpen en proactief kan meedenken in de ontwikkeling van ons IT landschap. Dan zijn wij op zoek naar jou! Functioneel applicatiebeheerder 32-36 uur per week Als applicatiebeheerder draag je samen met de collega applicatiebeheerder zorg voor het inrichten, monitoren, analyseren en verbeteren van de technische infrastructuur en procedures rondom beheerde applicaties. Je waarborgt de beschikbaarheid van het systeem, de performance en houdt het toekomstbestendig door het verzorgen van updates en toepassen van bugfixes. Je zorgt dat de medewerkers en zorgverleners van PrivaZorg

Bekijk vacature »

Senior Software Developer

Jouw positie in het veld In de rol van Software Developer werk je nauw samen met de architecten aan de transformatie naar een toekomstbestendige Cloud gebaseerde architectuur, waarbij je gebruik maakt van de nieuwste technologieën. Het is jouw taak om de bedrijfsbehoeften te vertalen naar software. Jij bent betrokken bij het ontwerpen, testen en ontwikkelen van de software. Daarnaast draag jij bij aan de integratie van software met andere applicaties en platforms. Tevens heb jij een bijdrage in de ontwikkeling van de volgende generatie verdelingsapplicaties. Dit is van belang voor de herbruikbaarheid van componenten, aansluiting bij de lange termijn architectuur

Bekijk vacature »

Ervaren Javascript Front-end Ontwikkelaar

Word jij de nieuwe Ervaren Javascript Front-end ontwikkelaar bij Impulse Info Systems in Twente? Bekijk dan deze vacature! Functie omschrijving Enkele taken: het omzetten van ontwerpen in perfect werkende front-end code analyseren hoe we gebruikerswensen het beste kunnen implementeren het ontwikkelen van intuïtieve oplossingen testen van je eigen oplossingen en die van andere collega’s Functievereisten Dit vragen wij van jou: beschikken over een afgeronde hbo- of wo-opleiding, bij voorkeur richting informatica meerdere jaren ervaring met ReactJS of vergelijkbare frameworks , HTML en CSS bij voorkeur kennis van responsive webdevelopment, unittesten en GIT kennis en ervaring met UX-, UI- en web-design

Bekijk vacature »

Java Developer

Java Software Engineer Verantwoordelijkheden Als Java software engineer werk je in het Development team. Tot je voornaamste verantwoordelijkheden behoren het: verbeteren, onderhouden en ondersteunen van bestaande applicaties ontwikkelen van business critical software ontwikkelen van complexe architectuur schrijven van complexe software ontwikkelen van nieuwe tools Kennis en ervaring De Java software engineer heeft: minstens 5 jaar ervaring als Java software engineer Java 8, Spring, REST webservices Frameworks zoals Spring/springboot, CXF, Hibernate grondige kennis van het schrijven van schone en complexe code Test Frameworks/Tools zoals JUnit, Mocking frameworks, Approval testing, SoapUI, Cucumber; mogelijkheid om te werken met zowel zeer gespecialiseerd technische collega's

Bekijk vacature »

Java Developer – Big data (Mango DB, Hadoop,

Intro Would you like to join a company who is active in the high-tech industry and work on high-end software? For our client I am looking for a Java Developer who know how to apply the latest Java Technologies in a semiconductor environment. Key words for this position are Big-data, Mongo DB, Hadoop, Spark and Kafka. About our client Our client creates the conditions that enable you to realize your full potential. They provide state-of-the-art facilities, opportunities to develop your talents, international career opportunities, a stimulating and inspiring environment, and most of all, the commitment of a company that recognizes

Bekijk vacature »

senior cloud system engineer

Team Hosting is op zoek naar een gedreven en deskundige senior cloud system engineer. Vind jij het interessant om cloud en big data technologie te ontwikkelen en toe te passen om Nederland veiliger te maken? Lees dan snel verder! Wat ga je doen? Bij de politie wordt momenteel een modern en robuust big data platform gerealiseerd in een private cloud die de informatievoorziening van de politieorganisatie vernieuwt en verbetert. Je draagt bij aan maatschappelijke en relevante ontwikkelingen en je zorgt ervoor dat Big Data een steeds grotere rol in het politiewerk krijgt. Het Big Data platform is qua omvang voor

Bekijk vacature »

Oracle Apex Ontwikkelaar

Wat je gaat doen: Als Oracle Ontwikkelaar werk je zowel zelfstandig als in teamverband aan het ontwikkelen en ontwerpen van software componenten. Je levert een bijdrage aan de ontwikkeling tot en met de implementatie. Je bent in staat om informatie te verzamelen,te analyseren en te documenteren van wensen en eisen van de eindgebruikers. Je bent in staat om functionele vereisten te vertalen naar technische specificaties, ontwikkelt web applicaties met behulp van Oracle Applicatie Express, door de veranderingen en ontwikkelingen van web formulieren en rapporten. Verbeteren van bestaande Oracle Apex Systemen. Ontwikkelen en veranderen van Oracle 11g database schema’s. Schrijven van

Bekijk vacature »

Junior .NET C# backend developer gezocht, centrum

Ben je een (.NET C#) software developer en op zoek naar een leuke baan met afwisselende projecten? Bij een bedrijf midden in de stad, met een gezellige collegiale sfeer? Lees dan verder! Voor een softwarebedrijf in Rotterdam zijn we op zoek naar een junior (.NET C#) developer, met in ieder geval 1 of 2 jaar ervaring. Het bedrijf bestaat uit circa 20 medewerkers, waarvan 10 tot 12 ontwikkelaars. De software systemen die ontwikkeld worden zijn digitale platformen die hun klanten in staat stelt hun diensten of producten aan te kunnen bieden. Dit zijn veelal langdurige projecten gericht op bedrijfskritische processen.

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

20/03/2019 11:26:40
 
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.