PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Popup via javascript

Door J C op 24-05-2014 16:30 gewijzigd op 24-05-2014 16:32
6.726 views
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):


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)

#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)

<a id="popup" href="#">Simple popup</a>
J
J C
26-05-2014 00:45
Ik wil graag dit topic nog een keer onder de aandacht brengen.
Ariën
26-05-2014 00:54
Staat er wat in je console vermeld?
J
J C
26-05-2014 00:55
Sorry wat bedoel je daarmee?
Ariën
26-05-2014 00:56 gewijzigd op 26-05-2014 00:56
De DebugConsole van Firefox of Chrome.

CTRL+SHIFT+J
J
J C
26-05-2014 01:03
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
26-05-2014 01:08
Laat je site anders eens zien? Ik gok erop dat iets hem niet helemaal valid maakt, waardoor jQuery ergens zal 'breken'?
Ariën
26-05-2014 01:26
Misschien moet je die MySQL-debug/errors eens uitzetten. Die maakt je HTML-document niet valid.
J
J C
26-05-2014 01:27
done
Ariën
26-05-2014 01:29
Verder is de link naar je jQuery-lib commented, en staat je pop-up-script voor het inladen van je jQuery-lib.

Reageren

Inloggen om te reageren