library_books<button class="modalbtn">Open Modal</button>
<div id="modal" class="modalbox">
  <div class="modalcontent z-depth-2">
    <span class="close">&times;</span>
    <p>Your Modal Content..!</p>
  </div>
</div>

library_books<style>
*{box-sizing: border-box;}
.modalbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
.modalbtn{
  background-color:#9575cd;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.modalbtn:hover{
  opacity:0.7;
}
.modalcontent {
  position:relative;
  background-color: #fefefe;
  margin:auto;
  margin-top: 15%;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  animation: slideLeftIn .5s;
  height:40%;
  text-align:center;
}
.close {
  position: absolute;
  right: 14px;
  top: 0;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: black;    
}
@keyframes slideLeftIn {
 0% {transform:translateX(-100%);opacity:0;}
 100% {transform:translateX(0);opacity:1;}
}
</style>

library_books<script src="jquery.min.js"></script>
<script>
  $(".modalbtn").click(function(){
    $("#modal").css("display","block");
  });
  $(".close").click(function(){
    $(this).parents(".modalbox").css("display","none");
  });
  $(".modalbox").click(function(e){
    if(e.target==e.currentTarget)$(this).css("display","none");
  });
</script>