[Résolu] Tutoriel : Comment créer un modal en HTML

<link rel="stylesheet" href="style.css" />
<input type="button" class="openmodal" data-target="mon_modal" value="Ouvrir modal" />
<div class="overlay"></div>
<div  class="modal" id="mon_modal">
<h3>Mon modal</h3>
<img src="images/fermer.png" class="close-modal">
<div class="modal-content">Je suis un modal!!</div>
</div>
<script type="text/javascript" src="modal.js"></script>

.modal{
border:1px solid rgba(0,0,0,0.3);
background-color:#F8F8F8;
/*border-radius*/
-webkit-border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
/*box-shadow*/
-webkit-box-shadow:0 0 6px #79B;
-moz-box-shadow:0 0 6px #79B;
box-shadow:0 0 6px #79B;
display:none;
left:50%;
margin-left:-260px;
padding:0px 20px 70px 20px;
position:fixed;
top:90px;
height:400px;
width:540px;
z-index:11;
color:black;
overflow:hidden;
}
.modal .close-modal{
position:absolute;
width:21px;
height:21px;
right:20px;
top:13px;
/*transition*/
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.modal .close-modal:hover{
cursor:pointer;
opacity:0.8;
}
.modal-content{
padding:10px 5px 5px 5px;
height:330px;
width:530px;
border-top:1px solid #4d4d4f;
border-bottom:1px solid #4d4d4f;
overflow:auto;
}
.overlay{
display:none;
background-color:rgba(51, 103, 153, 0.5);
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:10;
}

function openModal(modal) {
    $(".overlay").show();
    $("#" + modal).show();
}
function closeModal() {
    $(".overlay").hide();
    $(".modal").hide();
}
$(".openmodal").on("click", function(event) {
    event.preventDefault();
    openModal($(this).data("target"));
});
$(".overlay").on("click", function() {
    closeModal();
});
$(".close-modal").on("click", function() {
    closeModal();
});