Popup via javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

J C

J C

24/05/2014 16:30:28
Quote Anchor link
Hallo,

Ik wil een popup maken via javascript. Maar heb nu verschillende scripts geprobeert, maar krijg het niet werkend.
Als ik op de link klik opend het gewoon een nieuw venster ipv de popup.

Ik heb dit tot nu toe.
In de head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

javascript (in de head):
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
var modal = (function () {
    // Generate the HTML and add it to the document
    $modal = $('<div id="modal"></div>');
    $content = $('<div id="content"></div>');
    $close = $('<a id="close" href="#"></a>');

    $modal.hide();
    $modal.append($content, $close);

    $(document).ready(function () {
        $('body').append($modal);
    });

    $close.click(function (e) {
        e.preventDefault();
        $modal.hide();
        $content.empty();
    });
    // Open the modal
    return function (content) {
        $content.html(content);
        // Center the modal in the viewport
        $modal.css({
            top: ($(window).height() - $modal.outerHeight()) / 2,
            left: ($(window).width() - $modal.outerWidth()) / 2
        });
        $modal.show();
    };
}());

// Wait until the DOM has loaded before querying the document
$(document).ready(function () {
    $('a#popup').click(function (e) {
        modal("<p>This is popup's content.</p>");
        e.preventDefault();
    });
});


css(in de head)
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
#modal {
    position:absolute;
    background:gray;
    padding:8px;
}
#content {
    background:white;
    padding:20px;
}
#close {
    position:absolute;
    background:url(close.png);
    width:24px;
    height:27px;
    top:-7px;
    right:-7px;
}


html (in de body)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a id="popup" href="#">Simple popup</a>
Gewijzigd op 24/05/2014 16:32:42 door J C
 
PHP hulp

PHP hulp

04/02/2023 07:10:22
 
J C

J C

26/05/2014 00:45:19
Quote Anchor link
Ik wil graag dit topic nog een keer onder de aandacht brengen.
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 00:54:36
Quote Anchor link
Staat er wat in je console vermeld?
 
J C

J C

26/05/2014 00:55:57
Quote Anchor link
Sorry wat bedoel je daarmee?
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 00:56:28
Quote Anchor link
De DebugConsole van Firefox of Chrome.

CTRL+SHIFT+J
Gewijzigd op 26/05/2014 00:56:42 door - Ariën -
 
J C

J C

26/05/2014 01:03:44
Quote Anchor link
Als ik het in fiddle in tik, werkt het wel.

http://jsfiddle.net/jcsl/5xfeV/


Weet niet of je dit wil zien:

"log" "blocking 4 sites" ui.js:100
Onbekende eigenschap ‘-moz-box-shadow’. Declaratie genegeerd. all.css:1
Onbekende eigenschap ‘zoom’. Declaratie genegeerd. all.css:1
‘ie7’ gevonden waar ‘important’ verwacht. ‘ie7’ gevonden om declaratie te beëindigen waar ‘;’ of ‘}’ verwacht. Declaratie genegeerd. all.css:1
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. all.css:1
‘alpha(’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. all.css:1
‘filter’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. all.css:1
Fout tijdens het parsen van waarde voor ‘background’. Declaratie genegeerd. all.css:1
‘progid’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. all.css:1
‘bottom’ gevonden waar kleur verwacht. Fout tijdens het parsen van waarde voor ‘background’. Declaratie genegeerd. all.css:1
Onbekende eigenschap ‘background-position-x’. Declaratie genegeerd. all.css:1
Onbekende pseudo-klasse of pseudo-element ‘-webkit-input-placeholder’. Regelset genegeerd vanwege foute selector. all.css:1
‘-moz-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. all.css:1
‘-o-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. all.css:1
‘-webkit-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. all.css:1
‘min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. all.css:1
Onbekende eigenschap ‘-moz-background-size’. Declaratie genegeerd. all.css:1
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery.min.js:3
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Fout tijdens het parsen van waarde voor ‘max-height’. Declaratie genegeerd. all.css:1
Fout tijdens het parsen van waarde voor ‘display’. Declaratie genegeerd. all.css:1
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery.min.js:3
geen element gevonden 54f0:1
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getAttributeNode() wordt niet meer ondersteund. Gebruik in plaats daarvan getAttribute(). moo-clientcide-1.3.js:3714
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:336
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:260
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:208
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1437
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:385
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:612
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:426
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1872
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:259
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:250
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:402
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:3927
Onbekende eigenschap ‘speak’. Declaratie genegeerd. elusive-webfont.css:16
Onbekende eigenschap ‘speak’. Declaratie genegeerd. elusive-webfont.css:32
‘progid’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. codemirror.css:54
‘progid’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. codemirror.css:58
‘*’ gevonden waar declaratie verwacht. Naar volgende declaratie gesprongen. codemirror.css:158
‘*’ gevonden waar declaratie verwacht. Naar volgende declaratie gesprongen. codemirror.css:159
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. codemirror.css:172
‘*’ gevonden waar declaratie verwacht. Naar volgende declaratie gesprongen. codemirror.css:238
‘-webkit-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. screen.css:17
‘-o-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. screen.css:17
‘-webkit-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. screen.css:34
‘-o-min-device-pixel-ratio’ gevonden waar naam van mediafunctie verwacht. screen.css:34
Fout tijdens het parsen van waarde voor ‘text-shadow’. Declaratie genegeerd. screen.css:146
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery-1.8.3.js:3255
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getAttributeNode() wordt niet meer ondersteund. Gebruik in plaats daarvan getAttribute(). moo-clientcide-1.3.js:3714
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:336
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:260
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:208
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1437
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:385
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:612
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:426
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1872
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:259
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:250
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:402
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:3927
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery-1.8.3.js:3255
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getAttributeNode() wordt niet meer ondersteund. Gebruik in plaats daarvan getAttribute(). moo-clientcide-1.3.js:3714
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:336
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:260
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:208
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1437
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:385
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:612
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:426
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:1872
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:259
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:250
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:402
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead jshint.js:3927
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery-1.8.3.js:3255
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:33
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:38
Onbekende eigenschap ‘-moz-border-top-left-radius’. Declaratie genegeerd. php.css:136
Onbekende eigenschap ‘-moz-border-top-right-radius’. Declaratie genegeerd. php.css:136
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:157
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:169
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:172
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:173
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:198
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:200
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:212
Selector verwacht. Regelset genegeerd vanwege foute selector. php.css:222
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:235
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:247
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:264
Onbekende eigenschap ‘moz-border-radius’. Declaratie genegeerd. php.css:591
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:600
Onbekende eigenschap ‘-moz-box-shadow’. Declaratie genegeerd. php.css:602
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:606
Onbekende eigenschap ‘moz-border-radius’. Declaratie genegeerd. php.css:626
Onbekende eigenschap ‘-moz-border-top-left-radius’. Declaratie genegeerd. php.css:791
Onbekende eigenschap ‘-moz-border-top-right-radius’. Declaratie genegeerd. php.css:791
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:1259
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:1265
Onbekende eigenschap ‘-moz-border-radius-topleft’. Declaratie genegeerd. php.css:1726
Onbekende eigenschap ‘-moz-border-radius-topright’. Declaratie genegeerd. php.css:1727
Onbekende eigenschap ‘-moz-border-radius-topleft’. Declaratie genegeerd. php.css:1737
Onbekende eigenschap ‘-moz-border-radius-topright’. Declaratie genegeerd. php.css:1738
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. php.css:1775
‘gray’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. php.css:1810
‘gray’ gevonden waar ‘none’ of URL verwacht. Fout tijdens het parsen van waarde voor ‘filter’. Declaratie genegeerd. php.css:1821
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. sidebar.css:11
Onbekende eigenschap ‘-moz-border-radius’. Declaratie genegeerd. sidebar.css:13
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
ReferenceError: $ is not defined boekingen.js:3
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
ReferenceError: $ is not defined boekingen.js:3
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
Er is een formulier in de windows-1252-tekenset verzonden dat niet alle Unicode-tekens kan coderen, waardoor gebruikersinvoer beschadigd kan raken. Om dit probleem te voorkomen dient u de pagina zo aan te passen dat het formulier in de UTF-8-tekenset wordt verzonden door of de tekenset van de pagina zelf naar UTF-8 te wijzigen, of door accept-charset=utf-8 in het formulierelement te specificeren. index.php
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
ReferenceError: $ is not defined boekingen.js:3
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
ReferenceError: checkform is not defined index.php:1
Er is een formulier in de windows-1252-tekenset verzonden dat niet alle Unicode-tekens kan coderen, waardoor gebruikersinvoer beschadigd kan raken. Om dit probleem te voorkomen dient u de pagina zo aan te passen dat het formulier in de UTF-8-tekenset wordt verzonden door of de tekenset van de pagina zelf naar UTF-8 te wijzigen, of door accept-charset=utf-8 in het formulierelement te specificeren. index.php
Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64
ReferenceError: $ is not defined boekingen.js:3
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
De tekenset van het HTML-document is niet gedeclareerd. Het document zal in sommige browserconfiguraties met onleesbare tekst worden weergegeven als het document tekens van buiten de US-ASCII-reeks bevat. De tekenset van de pagina dient in het document of in het overdrachtsprotocol te worden gedeclareerd. search.php
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 01:08:48
Quote Anchor link
Laat je site anders eens zien? Ik gok erop dat iets hem niet helemaal valid maakt, waardoor jQuery ergens zal 'breken'?
 
J C

J C

26/05/2014 01:11:51
Quote Anchor link
http://www.jcsl.nl/medewerkers/index.php?pagina=bw-boeking&do=producten&kenmerk=14050746


als moderator kun je bovenstaande vast wel verwijderen als je het gelezen hebt. ;-)
Gewijzigd op 26/05/2014 01:38:23 door J C
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 01:26:23
Quote Anchor link
Misschien moet je die MySQL-debug/errors eens uitzetten. Die maakt je HTML-document niet valid.
 
J C

J C

26/05/2014 01:27:59
Quote Anchor link
done
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 01:29:44
Quote Anchor link
Verder is de link naar je jQuery-lib commented, en staat je pop-up-script voor het inladen van je jQuery-lib.
 
J C

J C

26/05/2014 01:31:30
Quote Anchor link
ja was ook een beetje aan het proberen, zal hem weer aan zetten.

Toevoeging op 26/05/2014 01:35:23:

Je bent geweldig, de volgorde aanpassen heeft het probleem opgelost.
 
- Ariën  -
Beheerder

- Ariën -

26/05/2014 01:36:14
Quote Anchor link
Graag gedaan :-)
 



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.