La fonction de fermeture ne fonctionne pas dans JQuery - javascript, jQuery

J'essaie de fermer une DIV contextuelle à l'aide d'une fermetureFonctionne avec jQuery, cela fonctionnait avant que j’ajoute la fonction de position de la DIV, et quelque chose que j’ai fait doit avoir cassé la fonction ... Je "le devine", c’est une erreur de syntaxe quelque part; Regardez?

Le site de travail est sur www.masterfade.com/maptest

Voici le code:

$(document).ready(function () {

$(".lightbox").click(function (event) {
event.preventDefault();
$(".backdrop, #box").animate({
"opacity": ".50"
}, 300, "linear");
$("#box").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box").css("display", "block");
});

$(".lightbox2").click(function (event) {
event.preventDefault();
$("#box2").css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$(".backdrop, #box2").animate({
"opacity": ".50"
}, 300, "linear");
$("#box2").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box2").css("display", "block");
});
});

$(".backdrop, #box2").animate({
"opacity": ".50"
}, 300, "linear");
$("#box2").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box2").css("display", "block");


$(".close").click(function () {
close_box();
});

$(".backdrop").click(function () {
close_box();
});



function close_box() {
$(".backdrop, #box, #box2").animate({
"opacity": "0"
}, 300, "linear", function () {
$(".backdrop, #box, #box2").css("display", "none");
});
}

Réponses:

Je pense que vos liaisons d'événements et fonctions d'animation sont appelées avant le chargement des éléments DOM. Donc, les liaisons d’événements ne fonctionneront pas.

J'espère que les codes suivants fonctionneront.

$(document).ready(function () {

$(".lightbox").click(function (event) {
event.preventDefault();
$(".backdrop, #box").animate({
"opacity": ".50"
}, 300, "linear");
$("#box").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box").css("display", "block");
});

$(".lightbox2").click(function (event) {
event.preventDefault();
$("#box2").css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$(".backdrop, #box2").animate({
"opacity": ".50"
}, 300, "linear");
$("#box2").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box2").css("display", "block");
});


$(".backdrop, #box2").animate({
"opacity": ".50"
}, 300, "linear");
$("#box2").animate({
"opacity": "1.00"
}, 300, "linear");
$(".backdrop, #box2").css("display", "block");

// following lines are edited

$(".close,.backdrop").click(close_box);

function close_box() {
$(".backdrop, #box, #box2").animate({
"opacity": "0"
}, 300, "linear", function () {
$(".backdrop, #box, #box2").css("display", "none");
});
}
});

alors,

J'ai navigué sur votre site Web et avec Outils de développement Google Chrome (console) iv "e appelé manuellement $(".lightbox").click() et close_box() et il semble que cela fonctionne comme excepté et aucune exception javascript n'a été levée.

cependant, je ne suis pas sûr que vous compreniez même ce qui ne fonctionne pas.

Je vous suggère fortement d'utiliser le navigateur Chrome avec des outils de développement, cela vous facilitera la vie en ce qui concerne le développement Web.

en utilisant cela, vous pouvez surveiller les erreurs javascript et déboguer votre code ligne par ligne.

bonne chance