meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior C# developer

Als Medior C# developer bij Profit4Cloud ontwikkel je de back-end en front-end oplossingen van overmorgen. We omarmen innovaties en zoeken daarvoor versterking in ons .Net-team. Je werkt samen met onze enthousiaste en eigenzinnige professionals. Gepassioneerd zijn we altijd bezig met ‘the next big thing’, of het nu gaat om het ontwikkelen van een supergave nieuwe applicatie of het up-to-date houden van onze vakkennis. Jouw spec's Een HBO of WO-diploma in Informatica, ICT of iets wat daarop lijkt C# is jouw second nature. Angular, React of NodeJS zijn jou ook niet vreemd evenals het .Net Core 2 platform Daarnaast breng je

Bekijk vacature »

Medior Full-Stack Developer (1 platform, duizenden

Organisatie Je komt te werken in een bedrijf wat nu 15 jaar bestaat. Wat begon als een studentproject van 4 man is inmiddels uitgegroeid tot een organisatie waar 40 mensen werken. Ze zijn gespecialiseerd in het ontwikkelen voor software voor de accountancy. Inmiddels maakt 8% van alle MKB bedrijven in Nederland gebruik van hun software die zowel op de desktop als mobiel werkt. Doordat alles binnen dit bedrijft wordt ontwikkeld en ontworpen wordt alle feedback en input gewaardeerd. Binnen het bedrijf hangt een open en gezellige sfeer. Zo wordt er samen geluncht en als je zin hebt kan je daarnaa

Bekijk vacature »

Traineeship junior software developer

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Professional Program en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van 2-4 maanden. Hierin ga je aan de slag met verschillende technieken die je op conceptueel niveau leert te overzien en interpreteren. Onderwerpen die aan bod komen zijn o.a. programmeren (Java/C#/Python), Object Oriëntatie, Databases, Webservices & webtechnologieën, Domain Driven Design en Continuous Integration/Continuous Delivery. Sommige van deze onderdelen sluit je af met een examen en bijbehorende certificering. Het opleidingstraject zelf sluit je af met

Bekijk vacature »

Senior full-stack .NET developer retail

Organisatie De organisatie focust zich daags op het beste resultaat als een van de beste leverancier op het gebied van retail automatisering. Doel is om proactief mee te denken aan een totaal oplossing voor complexe vraagstukken. Klanten variëren van grote winkel ketens (hot brands) naar snel groeiende organisaties in de regio, maar ook in Duitsland én België. Samen met een grote team van inmiddels meer dan 80 medewerkers, is er elke dag weer een nieuwe uitdaging! Team van programmeurs bestaat uit 10 software developers met o.a. 2 senior developers. Je komt te werken binnen een informele werkomgeving. Bij binnenkomst pak

Bekijk vacature »

Medior C# Developer

Vacature Omschrijving De financiële wereld is absoluut saai en de verzekeringswereld ook, maar niet bij dit bedrijf. Geloof je het niet? Let them prove it. Dit bedrijf is in 2010 begonnen in een kelderkamertje en zijn nu al met ruim 100 man. Zij houden zich bezig met pensioenen en vermogens. Dit klinkt natuurlijk saai, maar gelukkig niet bij hun. Zij doen het op hun eigen manier. Zij zijn van mening dat het anders moet met lage kosten, begrijpelijke producten en lekker hard rennen voor je klant. Ze hanteren een open en frisse cultuur, lekker informeel. Met dit bedrijf krijg je

Bekijk vacature »

Medior PHP developer

Organisatie Deze organisatie, gevestigd in meerdere landen in Europa, bestaat nu 8 jaar en groeit nog steeds ieder jaar ontzettend hard. Op dit moment telt het hoofdkantoor in Hilversum zo’n 250 medewerkers. Deze organisatie werkt voor de grote telecom bedrijven en biedt allerlei oplossing voor hun partners, met name gericht op de cloud. Deze organisatie heeft een compleet communicatieplatform vanuit waar zij al hun oplossingen aanbieden. Om de kwaliteit richting partners te garanderen wordt het netwerk ook zelf beheert. De reden dat deze organisatie in de top 20 van alle Nederlandse bedrijven staat met de beste arbeidsvoorwaarden is met name

Bekijk vacature »

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

Als Medior programmeur (C# .NET) werken aan vergel

Vacature Omschrijving Voor een bedrijf gericht op softwareoplossingen voor de verzekeringsbranche zijn wij hard op zoek naar een .NET developer. Deze partij stelt verzekeringsoplossingen beschikbaar voor iedereen. Als ondernemer, ledenorganisatie of als particulier kunt u bij hen terecht voor advies bij risico-inventarisatie én het kiezen van het juiste verzekeringspakket. Doordat geen enkele verzekeringsmaatschappij belangen heeft in deze organisatie, opereren zij geheel onafhankelijk. Het bieden van kostenbesparing en kostenbeheersing is het hoofddoel. Al sinds de oprichting in 2001 hebben zij de ambitie om het meest klantvriendelijke kantoor van Nederland te zijn. ‘Bij alles wat we doen vragen we ons af hoe

Bekijk vacature »

Junior Java Developer bij Alvant

Vacature Omschrijving Functieomschrijving Je creëert De nieuwste technieken worden ingezet om mooie maatwerkprojecten te creëren voor de meest uiteenlopende opdrachtgevers. Je bent een leergierig- en proactieve professional die het IT-vak serieus neemt en kwaliteit levert. Je staat met beide benen op de grond en wilt jezelf maar al te graag ontwikkelen. Je gaat samen met een senior developer kijken hoe jij jouw ontwikkelpad zo goed mogelijk kan inzetten om jouw doelen snel te bereiken. Je verbindt Je werkt, samen met ervaren Javanen in een Agile omgeving, aan de bouw van een webapplicatie of uitbreiding van een bestaande applicatie. Je staat

Bekijk vacature »

Front-end developer met interesse in het innoveren

Vacature Omschrijving Dit groeiend bedrijf bouwt al tien jaar aan innovatieve systemen en applicaties ten behoeve van personeelsprocessen. Het systeem draait in the cloud en kan efficiënt en foutloos plannen. De software is erg krachtig, maar gaat binnenkort in een nieuw jasje gestoken worden, om deze te innoveren en optimaliseren voor de eindgebruikers. Daarom zoekt dit groeiende bedrijf nadrukkelijk naar een front-end developer. Bezit jij de drive om samen met je collega experts het systeem te moderniseren en perfectioneren? Functieomschrijving Als front-end developer ga jij bijdragen aan het innoveren van de softwaresystemen om de gebruiksvriendelijkheid bij de klant te vergroten.

Bekijk vacature »

Senior PHP developer / Online Product

Organisatie Voor onze klant in Amsterdam zijn wij opzoek naar een Senior PHP developer die hier het productteam van 20 ambitieuze developers komt versterken. Naast dat jij hier aan de slag zult gaan als developer, zal jij je thuis gaan voelen binnen dit gave bedrijf met een hecht team. Dit bedrijf is in de afgelopen 5 jaar flink gegroeid en niet meer weg te denken van het internet. Naast dat zij werken aan een goed onlineproduct, zorgen zij ervoor dat het zo gebruikersvriendelijk, veilig en transparant mogelijk is voor de koper. De IT is hier de core business en daarom

Bekijk vacature »

SENIOR BACK-END DEVELOPER C#.NET - AMSTERDAM PERP0

You will develop innovative mid-tier and back-end applications using technologies such as ASP .Net Core, C# and Entity Framework. You will create and integrate with RESTful web services and help them stay up to date in their architecture and technology selection. As a Senior C# / .Net Core Developer, you will be responsible for: Developing and integrating new and existing applications; Analysis of functional and non-functional requirements and working with your colleagues to determine the best possible solutions; Advocating for best practices, and doing whatever it takes to help to get the right solutions implemented to deliver value to customers

Bekijk vacature »

Top C++ Developers, Top Salary, Top Location

Job profile Top C++ Developers Top salary for Top C++ Developers who want to relocate and work for a successful software company in Berlin, Germany. A unique opportunity for the smartest and most creative C++ developers with a solid theoretical background from all over the world. You work on a wide array of extremely challenging C++ development tasks. Look at a problem from the user's perspective and discuss abstract concepts with fellow developers. You will be responsible for the whole range of activities when implementing a new feature. Architecture, design, implementation, customer feedback and bug fixing. So complete control over

Bekijk vacature »

Als Java programmeur aan de slag bij een Artificia

Vacature Omschrijving Deze partij betreft een innovatieve spin-off van een succesvol data management bedrijf opgericht in 2006 dat cloud-gebaseerde oplossingen bouwt die enorme hoeveelheden gegevens in enkele seconden kunnen analyseren om de winstgevendheid van bedrijven voornamelijk in de horeca, vrijetijdsbranché en detailhandel te verbeteren. Deze oplossingen zijn gebaseerd op Google Cloud Platform zoals Google App Engine, Google BigQuery en Google Prediction. Deze spin-off is opgericht 2010 en focust zich op Artificial Intelligence oplossingen. Bij deze innovatieve partij zijn ze van mening dat de gegevens de mening overtreffen. Daarom stellen ze hun klanten in staat om inzicht te krijgen in de

Bekijk vacature »

C# ontwikkelaar

Organisatie Vanuit een modern pand in het centrum van Zoetermeer wordt hard gewerkt aan baanbrekende software pakketten voor de financiële sector. 25 jaar geleden begon het avontuur. Vanuit een klein pandje begonnen de 2 oprichters, voormalige schoolvrienden, aan een hun eerste klus: het maken van administratiesoftware voor verschillende bankfilialen. 25 jaar later zijn beide schoolvrienden nog steeds met passie werkzaam maar inmiddels in een groter kantoor. Dit doen ze inmiddels ook niet meer met zijn tweeën. Daar hebben ze nu een team van 50FTE voor die op gedreven wijze de financiële sector compleet omgooien. Processen zoals verschillende risico analyses, rendement

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/08/2019 21:41:06
 
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.