meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET ontwikkelaar / C# / miljarden berichten

Functieomschrijving Ben jij als .NET Developer bekend met oplossingen voor zwaar berichtenverkeer? Wil jij onderdeel zijn van een organisatie in regio Den Bosch die de verantwoording heeft om grote hoeveelheden gevoelige data veilig te versturen? Dan is dit je kans om voor een topclub te komen werken! Programmeren van high-availability en high-security applicaties in C#; Samen met je teamgenoten nieuwe applicaties/diensten ontwikkelen in .NET; Overleggen met de informatie analisten en testers; Ontwikkelen van webservices (WCF); 20 % van je tijd besteden aan innovatie; Deelnemen aan projecten om nieuwe ketenpartijen toe te voegen; Bouwen van unit testen. Functie-eisen Beschikt over HBO/WO

Bekijk vacature »

Java Full Stack Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Full Stack Developers om ons development team te versterken. Als Full Stack developer werk je in Agile teams bij onze klanten en ben je verantwoordelijk voor alle lagen van de stack. Ben je beter in de backend, dan helpen we je verder met de front-end en andersom natuurlijk. Je gaat hoogwaardige software maken voor verschillende opdrachtgevers in jouw regio. Je ontwikkelt, adviseert over architectuur en past de nieuwste technologieën toe. Je bent een professional die het IT-vak serieus

Bekijk vacature »

Technisch Ontwerper / Applicatieontwikkelaar max.

Wie zoeken we? Je bent de beste in je vak of hebt de ambitie en de potentie om de beste te worden. Je hebt de passie om nieuwe technologieën te blijven leren en continu jezelf te ontwikkelen. Je hebt de pioniersgeest en drive om nieuwe technologieën, methodieken en concepten toe te passen in projecten en bij klanten. Je vindt het leuk om kennis te delen met collega’s, klanten en vakgenoten. Je bent een ware professional en ambassadeur voor CIMSOLUTIONS. Je voelt je thuis in een informele, collegiale en professionele sfeer waar de aandacht voor de klant en voor de medewerker

Bekijk vacature »

Fullstack C# .NET Developer Mobile Applications

Functieomschrijving Wil je een verschil maken als .NET ontwikkelaar waar je in een relatief kleine organisatie werkt aan diverse uitdagende software oplossingen? Is een uitdagende baan in regio Apeldoorn je wens, waar jij jezelf verder kan ontplooien als .NET Developer met diverse focus gebieden zoals front-, back-end en mobile oplossingen? Klink dit interessant? Dan hoor ik graag van jou. Omgeving Je komt terecht in een team van 10 Developers, waarvan 7 zich dagelijks bezighouden met .NET Software projecten. Ze passen SCRUM toe in vele projecten. Op dit moment zijn bijvoorbeeld twee SCRUM teams bezig met het ontwikkelen van een tweetal

Bekijk vacature »

specialist mobile devices - IoT (5G)

Wat ga je doen? Je speelt een belangrijke rol in de opsporing van strafbare feiten in digitale omgevingen. Je bent de intermediair tussen de digitale techniek en de recherche en adviseert over een effectieve aanpak. Je bent volledig bij complexere opsporingsonderzoeken betrokken. Als specialist mobile devices ben je bezig met het veiligstellen, combineren en analyseren van gegevens uit diverse digitale bronnen in het bijzonder uit mobile devices. Een smartphone of tablet heeft voor jou geen geheimen, je bent op de hoogte van rooting, flasherboxen en jailbreaking. Als specialist IoT ga je met jouw kennis van loT/5G kansen onderzoeken en ontwikkelen

Bekijk vacature »

C# .NET developer bij specialist in elektrotechnie

Vacature Omschrijving Deze werkgever is de specialist in elektrotechniek, industriële automatisering en productie-ICT. Voor hen zijn wij momenteel hard op zoek naar een .NET developer. Hun doel? Machines en productieprocessen intelligenter maken. Dat doen zij voor productiebedrijven en machinebouwers in binnen- en buitenland. Zij zijn een familiebedrijf, gebouwd op ondernemerschap en wilskracht. Medewerkers krijgen bij hen de vrijheid om te doen waar zij goed in zijn. Ze gaan zelf op zoek naar oplossingen. In jezelf geloven en durven om het verschil te maken, daar gaat het om. Een kwestie van: anders denken, gewoon doen! Deze partij heeft zeven vestigingen: zes

Bekijk vacature »

Medior/Senior C# VB.NET Developer

Organisatie Ken je dat gevoel dat je als IT’er niet wordt gewaardeerd binnen een bedrijf? Of dat je eigenlijk maar een aanvulling bent op de rest? Dan heb ik hier een vacature bij de absolute tegenpool hiervan! Dit softwarebedrijf is volledig gericht op ICT. Meer dan de helft van al het personeel zijn developers. Zelfs de directeur is programmeur. Hierdoor ben je ervan verzekerd dat je in goede handen terecht zult komen. De gehele bedrijfsvoering is erop gebouwd om alleen de moeilijkste uitdagingen aan te nemen. Projecten en opdrachten die bij andere bedrijven gefaald zijn, nemen zij met alle plezier

Bekijk vacature »

PHP Developer / Marketing Intelligence

Organisatie Wil jij aan de slag in een toonaangevend bedrijf op het gebied van online marketing om mee te bouwen aan een high tech systeem op het gebied van online marketing? Hecht je waarde aan een informele cultuur en wil je daarin klaargestoomd worden tot top developer? Wil je graag werken in een prachtig pand te centrum Amsterdam? Reageer dan snel! Deze volwassen organisatie is al lange tijd een van de marktleiders in de online marketing branche. Omdat er in Nederland zo’n 4500 andere organisaties zijn waarmee ze concurreren dachten ze: Dat kan anders! In plaats van de online marketing

Bekijk vacature »

Senior back-end ASP.NET C# developer

Organisatie Voor een van mijn businesspartners uit de omgeving van Wageningen ben ik op zoek naar een senior back-end ASP.NET C# developer. Deze organisatie is marktleider op het gebied van software voor de automotive industrie. Zij maken software ter bevordering van de rittenregistratie en wagenparkadministratie voor leasemaatschappijen. Het bedrijf is circa 60 man groot waarvan 9 software developers. Naast de development afdeling heb je een creative-afdeling, een salesafdeling en een supportafdeling. De organisatie bestaat bijna 20 jaar en is nog altijd groeiende. De medewerkers zijn er loyaal en staan allen achter de ambitie die het bedrijf heeft. De sfeer is

Bekijk vacature »

Gezocht sociale Full-Stack PHP Developer

Organisatie Je komt te werken in een bedrijf wat 10 jaar geleden is begonnen in de direct marketing maar door de jaren heen is ontwikkelt tot een communicatie en strategie bureau. Dit bedrijf is nu met zo’n 100 medewerkers verdeeld over 7 afdelingen. Ze werken voor verschillende bekende goede doelen en grote scholen. Elke dag wordt er samen gegeten en elke maand hebben zij de “domibo”. Daarnaast organiseert ook de personeelsvereniging verschillende uitjes en om de zomer af te sluiten hebben ze binnenkort een afsluitende BBQ. Functie Je komt te werken in een team van 5 developers op medior en

Bekijk vacature »

YOUNG TALENT TECH PROGRAM

YOUNG TALENT TECH PROGRAM Utrecht Technology 13 month pay 26 days holiday Bonus Program Possible (lease) car 32-40 hours p.w. Laptop & Smartphone Flexible mobility budget The Young Talent Tech Program is specially designed to kick-start your career as Technology Consultant. Don’t worry! You do not need to have an IT background! We are looking for a smart, motivated person, who is eager to learn and obviously, isn’t afraid of using a laptop or talking to robots. So, do you (almost) have your Bachelor or Master, and do you want to start your career within IT? This is your chance!

Bekijk vacature »

ICT Servicedesk medewerker / Allround IT Support p

Office 365 ITIL Support Beheer Active Directory Windows 7/10 Gebruikersaccounts Rechtenbeheer Wachtwoord reset Werkplekbeheer Servicedesk ICT Gebruikers Ondersteunen Problemen Incidenten 1e en 2e lijn SKILLED ICT SERVICEDESK MEDEWERKER Zonder jou, geen ICT! Projecten in de regio's Utrecht, Noord-Brabant, Zuid-Holland, Noord-Holland en Flevoland Steek jij graag je handen uit de mouwen om onze IT-services op hoog niveau aan te bieden aan onze eindgebruikers? Vind jij net als wij dat je op een Servicedesk genoeg incidenten zelf op moet kunnen lossen en hou je wel van een beetje verantwoordelijkheid? Geeft het ondersteunen van gebruikers jou ook een goed en nuttig gevoel én

Bekijk vacature »

Chapter Lead Frontend Developer Amsterdam

Chapter Lead Frontend Developer wanted for a rapidly growing Dutch start-up based in de Jordaan (Amsterdam) which is disrupting the Latin American market through an innovative app & platform. What you would do as Chapter Lead Frontend Developer: Support and lead a team of 3 international developers, setting goals, long term plans As part of one of their squads, you would improve the codebase and work together with the PO to plan the next sprints As coach and tech expert, you would stimulate the team to their best performance Mentor Junior Developers What you would bring to the team as

Bekijk vacature »

Senior Full-stack .NET developer

Organisatie Werken als programmeur is vrij uniek, maar werken als .NET developer in de verzekeringsbranche en daarmee bijdragen aan een betere wereld is veel unieker! De organisatie bestaat uit 300 medewerkers verdeeld over 11 vestigingen. In verband met een fusie van eind 2017 is er behoefte aan een communicatief vaardig full-stack developer. We geven je eerst een rondleiding; je komt terecht in een open en informele omgeving met prettige collega’s. De werkgever hecht veel waarde aan collegialiteit en daarom zie je een flipperkast, een bokspaal, pingpong-tafel en een tafelvoetbal staan voor in je vrije tijd. Er is tevens veel ruimte

Bekijk vacature »

Medior .NET developer / Azure /

Deins jij niet terug voor een uitdaging? Heb jij passie voor het vak en zit je het liefst de hele dag met de vingers aan de knoppen? Ben je communicatief vaardig en wil je werken met de nieuwste technieken in een proactief team van enthousiaste developers? Dan ben ik op zoek naar jou! De organisatie Deze organisatie is gespecialiseerd in de ontwikkeling van hypotheeksoftware. Het is jouw doel om het voor de eindgebruiker zo makkelijk mogelijk te maken om alles te regelen omtrent zijn/haar hypotheek. Zo heeft de klant de behoefte om veilig in te kunnen loggen op de online

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

19/06/2019 18:08:25
 
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.