HTML/CSS - Alternative Alert Button Design Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>New Alert Box</title>
     <!--   <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">-->
       <script src="https://code.jquery.com/jquery-3.1.1.js">
      </script>
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    </head>
    <body>
    
    <div id="container">
     <p id="p">
     <h1>CHALLENGE : Create an improved alert box</h1>   
        <ul>
        <li>code, with HTML / CSS / JS.</li> 
        <li>alert box which contains a title, a comment and the OK button (maybe the Back button too).</li>
        <li>transitions, animations.</li> 
        </ul>
    </p>
     <input id="clickButton" type="button" value="Click me ">
    </div>
        <a href="https://www.sololearn.com/Discuss/910968/?ref=app">  Challenge link</a>

css

body {
    background:url("https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
    background-size:80vh;   
    font-family: 'Dosis', sans-serif;
    margin:0;
    padding:0;
}
a{
    color:  #000;
    text-shadow:5px 5px 5px  rgba(162,158,150,1) ;
    font-weight:bold ;
    padding-right:10px;
    float:right ;
}
/*----------------- main container------------*/
#container{
    background-color: rgba(255,255,255,0.5);
  //  color: #343434;
    height:85vh;
    width:60vh;
    margin-left:auto; 
    margin-right:auto ;
    margin-top:10px;    
    z-index:1;
}
#container h1{
    background:  rgba(230,230,230,.9);
    font-size:17px;

$(function() {
  var backShadow = document.getElementById("alertBackShadow");
  var click = document.getElementById("clickButton");
  var container = document.getElementById("container");
  var ok = document.getElementById("okButton");
  
  backShadow.style.display= "none";
//  $('#alertBackShadow').hide();
  
  click.onclick = function() {
    backShadow.style.display = "block";
    container.classList.remove("blurOut");   
    container.classList.add("blur");
};
    ok.onclick = function(){
       backShadow.style.display = "none";
       container.classList.remove("blur");   
       container.classList.add("blurOut");
    };
    
});

BROWSER

Console