Fermer une fenêtre avec JavaScript onClick

Sur mon site web, j'ai 4 Fenêtres (identifié par cible1, target2, target3 et target4). Sur ces Fenêtres, je veux ajouter un bouton avec le nom de "fermer" et à l'aide d'un événement onClick appel de la fonction de correction en fonction de la fenêtre.

function close_window1(){
    document.getElementById('target1').style.display = 'none';  
}

function close_window2(){
    document.getElementById('target2').style.display = 'none';  
}

function close_window3(){
    document.getElementById('target3').style.display = 'none';  
}

function close_window4(){
    document.getElementById('target4').style.display = 'none';  
}

Je suis sûr qu'il ya une meilleure façon que cela:

function close_window(){
    $(this).parents('div').style.display='none'
}

Cela permettra de fermer la fenêtre de l'événement, mais il ne fonctionne pas.

Quelqu'un pourrait m'aider s'il vous plaît?

InformationsquelleAutor Simpleacc | 2014-08-12
  1. 1

    si je comprends bien vous pouvez simplement utiliser ce:

    var windows = $('#target1, #target2, #target3, #target4');
windows.on('click', function() {
  $(this).hide();
});

    Vous devriez envisager de donner le bouton d'une classe:

    HTML

    <div class="windows">
 <button class="close_window">X</button>
</div>

    JS

    var closeButtons = $('.close_window');
closeButtons.on('click', function() {
  $(this).parent().hide();
});

    Ensuite, vous pouvez obtenir réellement l'objectif que vous voulez 🙂

    Ce qui concerne

    • Pas tous, je ne veux fermer 1 fenêtre (la fenêtre que je ne onlcick événement)
    • mise à jour du code.
    • Le JS, je dois l'ajouter sur la tête de HTML ou je peux l'ajouter sur un .fichier js?
    • Un hehe ok, il fonctionne très bien maintenant 😀 merci beaucoup
    • Comme vous le souhaitez. En fait j'aime diviser html js.
    • Yeha c'est plus facile avec cette fonction ^^

    InformationsquelleAutor Michael Schneider
  2. 1

    Vous pourriez commencer par faire de l'id de paramètre de la fonction comme ceci:

    function close_window(id) {
    document.getElementById(id).style.display = 'none';
}

    De cette façon, votre onclick du bouton de aurait à ressembler à quelque chose comme ceci: "close_window('cible1')"

    Vous pouvez également trouver la fenêtre pour la fermer en remontant les DOM à partir de la touche. Pour vous donner un exemple pour que nous aurions besoin de voir le code HTML réel.

    InformationsquelleAutor icke
  3. 1

    Veuillez vérifier le violon

    http://jsfiddle.net/7s49z1zn/

    Ajouter une classe commune pour les fenêtres et bouton de fermeture. 

    $('.close').click(function(){
    $(this).parents('.window').css('display','none');

    });

    Cela devrait fonctionner

    • Merci beaucoup!!! Il fonctionne perfeclty 😀
    InformationsquelleAutor user2285312
  4. 0

    J'ai imaginé un code comme ceci:

    <div class="window" id="target2">
    <p>TEXT</p>
    <a href="#">Close</a>
</div>

    Si vous avez ce code, vous pouvez utiliser $('.window a').click(); pour attraper cliquez sur l'événement

    puis obtenir parent var parentWindow = $(this).parent();

    (pour les tests, vous pouvez obtenir l'ID de fenêtre via parentWindow.prop('id');)

    et enfin fermer cacher//fondu... parentWindow.fadeOut();

    Ici est DÉMO

    InformationsquelleAutor debute