Buenos Dias a todos, Soy nuevo con JavaScript y estoy tratando de implementar un modal de esta pagina "https://codepen.io/nunofidalgo/pen/zrYoVr" ya implemente el CSS pero el JavaScript me esta dando problemas, intente colocando el JS internamente y con un archivo .js pero me da el mismo error "index1.aspx:11 Uncaught ReferenceError: $ is not defined"
Se que es algo tonto pero soy nuevo en esto, gracias (Ya agregue los archivos adicionales de referencia que son "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" Y "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" sin embargo me da error en el mismo sitio)
Codigo en JS donde tiene el error
$('#myModal').modal('show');
Codigo Completo
$('#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);
});
Llamado desde la pantalla .aspx
<script src="Script/query.js"></script>