Forumda bir kaç gün önce bir arkadaş için hazırlamıştım, sizin örneğe göre revize ettim.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#hiddenContent .content{position:fixed;top:50%;border-top-right-radius:4px;border-bottom-right-radius:4px;transform:translate(0, -50%);left:-280px;width:280px;min-height:500px;z-index:12;background-color:#fff; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.08);transition:left .25s ease-in-out 0s}
#hiddenContent button{position:absolute;right:10px;top:10px;border-radius:4px;background:none;border:0;padding:0;width:30px;height:30px;background-color:#eee;cursor:pointer;z-index:11;transition:right .5s ease-in-out 0s}
#hiddenContent button:focus{outline:none}
#hiddenContent .mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:all .1s ease-in-out 0s}
#hiddenContent.show .content{left:0}
#hiddenContent.show .mask{visibility:visible;opacity:1}
</style>
</head>
<body>
<button id="test">Demo</button>
<div id="hiddenContent">
<div class="content">
<form style="padding:10px">
<input type="text" value="bla bla">
</form>
<!-- Form alanı -->
<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="10.819" height="10.819" viewBox="0 0 10.819 10.819">
<rect id="Rectangle_380" data-name="Rectangle 380" width="2.186" height="13.115" transform="translate(0 1.546) rotate(-45)" fill="#2d2d2d"/>
<rect id="Rectangle_381" data-name="Rectangle 381" width="2.186" height="13.115" transform="translate(9.274) rotate(45)" fill="#2d2d2d"/>
</svg>
</button>
</div>
<div class="mask"></div>
</div>
<script>
let hiddenContent = function(display) {
document.getElementById("hiddenContent").className = display;
}
document.getElementById("test").addEventListener("click", function(){
hiddenContent("show");
});
document.querySelector("#hiddenContent button").addEventListener("click", function(){
hiddenContent();
});
document.querySelector("#hiddenContent .mask").addEventListener("click", function(){
hiddenContent();
});
</script>
</body>
</html>
Hazırladığım hali şu idi;
https://www.r10.net/javascript-programlama/2658619-javascript-sorum-var.html#post1079145187