Error Implementing JavaScript to display Modal

1

Good morning everyone, I am new with JavaScript and I am trying to implement a modal of this page " link " and implement the CSS but the JavaScript is giving problems, try placing the JS internally and with a .js file but it gives me the same error "index1.aspx: 11 Uncaught ReferenceError: $ is not defined"

I know it's silly but I'm new to this, thanks (I already added the additional reference files that are "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" and "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5 /js/bootstrap.min.js "however I get an error in the same place)

Code in JS where you have the error

$('#myModal').modal('show');

Full Code

$('#myModal').modal('show');

var particleCount = 300;
var particleMax = 1000;
var sky = document.querySelector('.modal');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = sky.clientWidth;
var height = sky.clientHeight;
var i = 0;
var active = false;
var snowflakes = [];
var snowflake;

canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';




var Snowflake = function () {
    this.x = 0;
    this.y = 0;
    this.vy = 0;
    this.vx = 0;
    this.r = 0;

    this.reset();
};

Snowflake.prototype.reset = function () {
    this.x = Math.random() * width;
    this.y = Math.random() * -height;
    this.vy = 1 + Math.random() * 3;
    this.vx = 0.5 - Math.random();
    this.r = 1 + Math.random() * 2;
    this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
    snowflakes = [];
    for (i = 0; i < particleMax; i++) {
        snowflake = new Snowflake();
        snowflake.reset();
        snowflakes.push(snowflake);
    }
}

generateSnowFlakes();

function update() {
    ctx.clearRect(0, 0, width, height);

    if (!active) {
        return;
    }

    for (i = 0; i < particleCount; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;

        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();

        if (snowflake.y > height) {
            snowflake.reset();
        }
    }

    requestAnimFrame(update);
}

function onResize() {
    width = sky.clientWidth;
    height = sky.clientHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = '#FFF';

    var wasActive = active;
    active = width > 600;

    if (!wasActive && active) {
        requestAnimFrame(update);
    }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
})();

onResize();
window.addEventListener('resize', onResize, false);

sky.appendChild(canvas);

var gui = new dat.GUI();
gui.add(window, 'particleCount').min(1).max(particleMax).step(1).name('Particles count').onFinishChange(function () {
    requestAnimFrame(update);
});

Called from the .aspx screen

<script src="Script/query.js"></script>
    
asked by Hans 04.12.2017 в 14:21
source

1 answer

0

That error means that you have not loaded the jQuery library.

Without seeing all the HTML I can not be sure 100% of what happens, but there are two options:

  • You still have to add the link, but I think not because you have put the URL in the question.
  • Your script is before that link, so it runs before jQuery exists on the page.
answered by 04.12.2017 / 15:30
source