1

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>
7
  • Muestra todo el código para poder ayudarte mas fácil
    – Anderviver
    Commented el 4 dic. 2017 a las 13:26
  • @AnderssonViveros Aqui va el codigo completo del JS
    – Hans
    Commented el 4 dic. 2017 a las 13:26
  • Edita la pregunta obviamente
    – Anderviver
    Commented el 4 dic. 2017 a las 13:28
  • Claro, Ya agregado @AnderssonViveros
    – Hans
    Commented el 4 dic. 2017 a las 13:30
  • yo diría que si puedes implementar también el html y el css para ejecutarlo en el snippet seria mas sencillo Commented el 4 dic. 2017 a las 13:34

1 respuesta 1

1

Ese error significa que no ha cargado la librería de jQuery.

Sin ver todo el HTML no puedo estar seguro al 100% de lo que pasa, pero hay dos opciones:

  • Te falta añadir el enlace, pero creo que no porque has puesto la URL en la pregunta.
  • Tu script está antes de ese enlace, con lo que se ejecuta antes de que jQuery exista en la página.
1
  • Gracias, era la opcion 2
    – Hans
    Commented el 4 dic. 2017 a las 15:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.