Modal

Bonjour,

J'ai un souci avec la mise en place d'une modale sur un bouton en position fixe. Lorsque je clique sur le bouton une modal devrait s'ouvrir avec un formulaire de contact à l'intérieur. Hors, rien ne se passe... je travail avec la dernière version de Wordpress

Merci d'avance,
Louise

[code=html]href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div id="mySidenav" class="sidenav"><a href="#" id="blog">03 88 62 43 38<i class="fas fa-utensils"></i></a></div><div id="modal">Venez dîner !</div><div id="modalForm"><h1>Réserver une table</h1><small>Envoyez nous votre réservation en précisant le nombres de personnes et la date souhaitée</small>
<form action="#"><input placeholder="Name" type="text" required /><input placeholder="Email" type="email" required /><input placeholder="Subject" type="text" required /><textarea placeholder="Comment"></textarea><input class="formBtn" type="submit" /><input class="formBtn" type="reset" /></form></div>

$(function() {
  
  // contact form animations
  $('#contact').click(function() {
    $('#contactForm').fadeToggle();
  })
  $(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();
    }
  });  
});
</script>

*modal contactez-nous*/
#modal {    
    -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
       margin: 4em auto;
       width: 219px;
       height: 59px;
       line-height: 58px;
       background: black;
       color: white;
       font-weight: 700;
		font-family: 'Signika', sans-serif; 
       text-align: center;
       cursor: pointer;
       left: -45px;
       position: fixed;
       top: 42%;
       transition: 0.3s;
		z-index: 1000;
		padding-left: 30px;
	font-size: 17px;
      
}

#modal:hover {
    background: #f0a295;
    animation: move_button 1s;
    animation-fill-mode: none;
    animation-fill-mode: forwards;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10),
    0 10px 50px 0 rgba(0, 0, 0, 0.19);
}

#modal:active {
    background: #444;
}

#modalForm {
    display: none;
    border: 6px solid salmon;
    padding: 2em;
    width: 400px;
    text-align: center;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	z-index: 1000000;
}

input,
textarea {
    margin: .8em auto;
    font-family: inherit;
    text-transform: inherit;
    font-size: inherit;
    display: block;
    width: 280px;
    padding: .4em;
}

textarea {
    height: 80px;
    resize: none;
}

.formBtn {
    width: 140px;
    display: inline-block;
    background: teal;
    color: #fff;
    font-weight: 100;
    font-size: 1.2em;
    border: none;
}

Salut,

$('#contact').click(function() {
    $('#contactForm').fadeToggle();
  })

Ou est ton élément #contact ?

Salut,

Problème réglé ?