meerdere keren modals invoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Product Owner

Do you have strong content and managerial skills? Do you enjoy customer interactions, building and maintaining productive teams? Do you get excited when you hear the words innovation and delivery? Then this vacancy is what you are looking for! What you will do You are responsible for the content of your product line / competence line, on operational, tactical, and strategic level. Activities are all technology and people related, you will: Design and own a content roadmap (e.g. in the field of data analytics, software, IT, or IoT) Co-shape business solutions with sales; you act between the customer and agile

Bekijk vacature »

Employee Application Services

Employee Application Services (Clear), fulltime. Nieuw leven geven aan gebruikte materialen: een bijdrage aan duurzaamheid waar we een startend IT-talent goed bij kunnen gebruiken. Maak jij het verschil? Een dynamische werkweek: aan de slag Als Employee Application Services ben je onderdeel van onze ICT-afdeling Operations. Je zorgt samen met de Application Services Consultants dat de continuïteit van de beheerde applicaties (Clear) wordt gewaarborgd. Dat betekent dat je continu let op eventuele storingen en deze zo snel mogelijk verhelpt. De eerstelijns vragen komen bij jou terecht. Verder pak jij de casussen op die je aankunt. In overleg met de consultants schuif

Bekijk vacature »

Front-end Webdeveloper /Javascript / React

Javascript / REACT Webdeveloper Regio Enschede Functieomschrijving Wil jij als Fullstack developer een applicatie ontwikkelen die direct wordt gebuikt door meer dan 100.000 gebruikers. Wil je werken met de nieuwste technologie en dit doen in een jong team met gedreven en behulpzame teamleden. Reageer dan snel op deze functie! Samen met het team ga je zorgen voor de beste oplossing op het gebied van softwareoplossingen in de Cloud. Dit ga je doen door het bouwen van moderne applicaties, welke worden geïntegreerd in het Mobil platform . Het ontwikkelen van nieuwe functionele concepten wordt gedaan doormiddel van een bijbehorende roadmap. Door

Bekijk vacature »

Talented DevOps Engineer

“Trusted identity verification. Since 1923.” KEESING Technologies is a world leader in ID authentication tools. To support its ambitious growth, we are looking for a: Talented DevOps Engineer Are you an accomplished DevOps engineer seeking a challenge in the world of software development and deployment? Then consider joining Keesing Technologies Amsterdam-based team. You will be part of a fun, talented team responsible for delivering world class IT systems, software, and web applications for ID document (e.g. passport / driving license) and individual authentication. In this role, you’llwork collaboratively with software engineering to deploy and operate our systems. Help automate and

Bekijk vacature »

Senior PHP Developer Onderwijssoftware SaaS oploss

Senior PHP Developer Onderwijssoftware SaaS oplossing Wat ga je doen als Senior PHP developer? Als Senior PHP Developer uit de omgeving Amsterdam, ga jij werken aan onderwijs-software pakketten voor basis- en het voorgezet onderwijs, en voor volwasseneducatie. Het pakket voor basisonderwijs is een overzichtelijke communicatie tool (Laravel) voor leerkrachten. Met de tool kunnen zij ouders en verzorgers meer betrekken bij de vooruitgang van het kind. Denk hierbij aan nieuwsbrieven, oudergesprekken inplannen, persoonlijke berichten en absentie registratie. De overige pakketten (Symfony) worden aangeboden als een SAAS-online leerplatform. Het geeft leerkrachten de mogelijkheden om extra lesmaterialen van uitgevers om op maat onderwijs

Bekijk vacature »

Full stack developer

Voor onze internationale opdrachtgever zoeken wij ter uitbreiding van het team een full stack developer die volledig nieuwe code gaat schrijven voor een cutting edge meetplatform. Innovatieve software die real time inzicht geeft in enorme hoeveelheden data. Wat ga je doen? Werken aan de uitbreiding en verbetering van een online meetplatform voor de olie- en gasindustrie. Dit doe je als full stack software engineer in een goed op elkaar ingespeeld scrum team van 5 collega's, waarmee jullie door continuous improvement tot het beste resultaat komen. Omdat het gaat om een omvangrijk nieuw project - gebouwd op TypeScript, Node.JS en state-of-the-art

Bekijk vacature »

Medior PHP Developer constructie bouwplatform

Medior PHP Developer constructie bouwplatform Wat ga je doen als Medior PHP Developer? Als Medior PHP Developer ga jij werken in Amsterdam, aan een PHP platform om een bouwproces beter in kaart te brengen. Het platform is van oorsprong bedoeld om aannemers als kopers van nieuwbouwwoningen te begeleid in het keuzeproces. Nu gaat het platform verder, zodra een woning in autocad 3d is gemodelleerd, identificeert het platform alle onderdelen en materialen die nodig zijn voor de bouw. Variabelen zoals specificaties, prijzen en levertijden worden aangegeven om een compleet financieel pakket uit te draaien. De technieken waar jij dagelijks mee gaat

Bekijk vacature »

iOS Developer

Je bent innovatief. Je bent creatief. Jij gaat voor een topbaan. Aan de slag als iOS-professional Mobile apps ontwerpen, uitwerken en realiseren, dat is jouw passie! Met grote toewijding richt jij je dan ook op een app waarmee consumenten met een gezichtsscan betalen. Of je stort je je op een app die de temperatuur in huis op afstand kan regelen. Het spreekt voor zich dat jouw apps top of the bill zijn als het gaat om gebruiksvriendelijkheid en veiligheid. Ze hebben impact. Je voelt je als een vis in het water in een iOS-omgeving maar, veelzijdig als je bent, kun

Bekijk vacature »

Oracle Middleware Developer

Wat je gaat doen: Wij zijn op zoek naar een Oracle Middleware Developer met kennis van/ervaring met onder andere SOA Suite 10G en/of SOA Suite 11G, WebLogic, BPEL Orchestration, Java, SOAP. Je bent bekend met de integratie laag gebaseerd op Oracle SOA Suite 10G. Als Middleware developer ben je verantwoordelijk voor de ontwikkeling van integratie tussen de diverse applicaties in het landschap, en de communicatie tussen de klant en andere stakeholders. Je werkt samen met het applicatie team, zoals functioneel ontwerpers en andere ontwikkelaars om de oplossing verder te ontwikkelen en te implementeren. Je collega’s werken onder andere met technieken

Bekijk vacature »

PHP Developer voor state-of-the-art webapplicatie

Functieomschrijving Werk jij graag met de nieuwste technieken? Wil jij graag een bijdrage leveren aan de maatschappij? Wil jij een applicatie van scratch af aan opbouwen? Lees dan snel verder! Ontwikkelen van een PHP objectgeoriënteerde applicatie; Meedenken in de architectuur; Keuzes maken over de te gebruiken tooling; Requirements verzamelen; Ontwikkelen van nieuwe functionaliteiten; Ontwikkelen van nieuwe modules; Zo nu en dan een legacy code onderhouden. Functie-eisen HBO werk en denk niveau; Minimaal 5 jaar werkervaring als PHP ontwikkelaar (OO); Ervaring met frameworks; Je ontwikkelt clean code; Je bent communicatief vaardig. Bedrijfsomschrijving De organisatie waar je komt te werken is een

Bekijk vacature »

Kans voor ervaren Wordpress developer!

Functieomschrijving Er is bij dit bedrijf veel uitdaging te vinden in het werk en ze hebben interessante klanten met uiteenlopende vraagstukken rondom hun websites en webshops. We zoeken een ervaren Wordpress ontwikkelaar die instaat is om samen met de andere collega's op hoog niveau mee te ontwikkelen met Wordpress. Omdat ze voorop lopen in het ontwikkelen met Wordpress en aanverwante tools (zoals WooCommmerce) is er ook veel ruimte om bij te blijven in je vak en ze volgen de Wordpress ontwikkelingen met elkaar op de voet. We zoeken iemand met 5 jaar professionele ervaring op Wordpress vlak en bij voorkeur

Bekijk vacature »

Front-end Developer

Full Stack Front-end Developer 32-40 uur, Utrecht Als Full Stack Front-end Developer bij HybrIT werk je aan diverse projecten voor verschillende klanten en loop je voorop in technische ontwikkelingen die je toepast in nieuwe en bestaande software. Door je brede kennis van front-end en basiskennis van back-end, weet jij de perfecte koppeling te leggen tussen mooie, gebruiksvriendelijke en achterliggende systemen. Past dit bij jouw ambities? Heb je minimaal drie jaar ervaring met bovenstaande skills en heb je een opleiding in de richting software development afgerond? Dan maken we graag kennis! Bij Hybrit werk je aan projecten bij mooie organisaties zoals:

Bekijk vacature »

Developer: C# / ASP.NET / Azure / VR / Hololens /

Functieomschrijving Werk je graag aan innovatieve projecten zoals Azure, Hololens, AI en VR? Wil je werken met C#, ASP.NET, MVC, webservices, Python, Angular, React.js, Ember.js, HTML en CSS? Reageer dan nu op deze vacature in regio Heerlen! Het ontwikkelen van nieuwe functionaliteiten op het gebied van een diversiteit aan software (zowel front-end als back-end) voor externe klanten middels C#, ASP.NET, MVC, webservices, Azure, Python, Angular, React.js, Ember.js, HTML, CSS, VR, AI en Hololens; Deelnemen en uitvoeren van innovatieve projecten; Het bezoeken van klanten in Nederland, Duitsland en België; Het uitvoeren van unittests; Het werken volgens de Agile/SCRUM methodiek; Het deelnemen

Bekijk vacature »

Front-End Developer

Functieomschrijving Omdat onze opdrachtgever blijft groeien, zijn we op zoek naar een medior Front-End Developer. Je gaat deel uitmaken van het UX/UI team dat verantwoordelijk is voor webportals en -applicaties. Daarnaast werk je regelmatig samen met andere (internationale) back- en front-end teams. Jouw vertrekpunt is het prototype opgeleverd door de UX/UI Designer. Je transformeert prototypes met mooie grafische afbeeldingen in en met code. In gesprek met de backend worden alle animaties en afbeeldingen omgezet in semantisch HTML, CSS (SASS) en JavaScript. Als Front-End Developer ben je vanaf het begin van de creatie van een webapplicatie betrokken, en ontwikkelt zo de

Bekijk vacature »

Full Stack Developer bij een bekend Nederlands bed

Functieomschrijving Ben jij een Full Stack Developer, heb jij ervaring met HTML, JavaScript en CSS én ligt jouw focus op front-end development? Dan is dit zeker de uitdaging voor jou! Jij zoekt oplossingen die ervoor zorgen dat de geleverde producten nog beter worden. ​​​​​​Jouw focus ligt als Full Stack Developer op de front-end omdat je dit net iets leuker vindt. Je hebt genoeg ervaring met HTML, Javascript én CSS en bent klaar voor een nieuwe uitdaging! Solliciteer jij bij iSense en krijg jij vervolgens deze baan? Dan krijg jij toegang tot het iSense Learning Center en kan je deelnemen aan

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

22/02/2019 20:47:21
 
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.