Modale avec jQuery

27 mars 2019 à 1:06:03

Bonjour à tous !

J'aimerais savoir comment faire apparaître une modale avec un bouton fait en html, à l'aide de jQuery, et pouvoir l'enlever en cliquant sur un autre bouton s'il vous plaît.

Voici mon code :

HTML :

<html>

<head>

</head>

<body>

<button id="modaleFirst">Modale</button>

bla bla bla modale

<button id="modale">Fermer la modale</button>

</body>

</html>

Javascript :

$(document).ready(

function(){

$('#modaleFirst').click(function(){

$('#cache').toggle('show');

});

$('#modale').click(function(){

$('#cache').toggle('show');

});

$('#modale').css(

{

'color': 'red',

'font-size': '40px',

'top': 0,

'left': 0,

'right': 0,

'bottom': 0,

'width': 400,

'padding': 50,

}

)

});

Merci d'avance !

-
Edité par Julie Lallement 27 mars 2019 à 1:06:27

ninjavascript

27 mars 2019 à 1:44:49

Merci d'utiliser le bouton de code prévu à cet effet afin de rendre le tout plus lisible. Merci.

Déjà, je te suggère de donner des noms cohérents à tes éléments :

<button id="openModal">Ouvrir la modal</button>

<div id="modal">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, eveniet.

  <button id="closeModal">Fermer la modal</button>
</div>

<div id="modal-overlay"></div>

Ensuite côté jQuery, le comportement n'est pas spécialement difficile. Il y a 2 actions :

clic sur le bouton #openModal va faire apparaître #modal (et #modal-overlay)
clic sur le bouton #closeModal va faire disparaître #modal (et #modal-overlay)

$(document).ready(function() {
  $("#openModal").click(function() {
    $("#modal, #modal-overlay").fadeIn();
  });

  $("#closeModal, #modal-overlay").click(function() {
    $("#modal, #modal-overlay").fadeOut();
  });
});

Enfin, c'est surtout grâce au CSS que le tout peut prendre un aspect plutôt sympa :

    #modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 400px;
        min-height: 200px;
        padding: 16px;
        background-color: #fff;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        transform: translate(-50%, -50%);
    }
    #modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    #closeModal {
        color: red;
        position: absolute;
        bottom: 8px;
        right: 8px;
    }

Pense toujours à cela :

HTML : Contenu
CSS : Apparence
JS : Comportement

Julie Lallement

27 mars 2019 à 22:46:29

Ah désolée je suis novice sur ce site ! Je n'étais jamais allée sur le site mais là j'étais en pleine détresse.
Merci beaucoup de m'avoir aidé !