• HTML
• CSS
• JS

HTML

<button id="mostrar">➭ Mostrar modal</button>

<div class="modal">
    <div class="modal-content">
        <span  class="salir" id="salir">X</span>
        <h1>Modal a estilo Bootstrap</h1>
    </div>
</div>

CSS

body{
    font-family:arial;
}
.modal{
    position:fixed;
    top:-100vh;
    left:0;
    z-index:9999999;
    background:rgba(0,0,0,0.75);
    width:100vw;
    height:100vh;
    opacity:0;
    transition:opacity 0.35s ease;
    
}
.modal-content{
    width:100%;
    max-width:500px;
    height:50%;
    position:fixed;
    left:50%;
    top:-100vh;
    transition:0.6s all;
    margin-left:-250px;
    background:tomato;
    box-shadow:0 1px 2px rgba(0,0,0,0.1);
    border-radius:2px;
    z-index:99999;

}
.modal-content h1{
    color:white;
    margin:10px;
}

span.salir{
    color:white;
    cursor:pointer;
    position:absolute;
    right:0px;
    margin:10px;
}
.modal.animate{
    top:0px;
}

.animate .modal-content{
    top:2rem;
}
.animate{
    opacity:1;
}


@media (max-width: 500px){
    
    .modal .modal-content{
        width: 90%;
        max-width: none;
        left: 5%;
        margin-left: 0;
    
    }
    
}

JS

$(function(){
    
    $("#mostrar").on("click",function(){
        $(".modal").addClass("animate");
    });
    
    $("#salir").on("click",function(){
        $(".modal").removeClass("animate");
    });
    
});