Zeige Textbox

Quellcode

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

<style>
.show-btn{position: relative; left: 50%; user-select: none; transform: translate(-50%, -50%);}
.show-btn.disabled{pointer-events: none;}
.modal{position: absolute; right: 40px; opacity: 0; bottom: -100%; width: 360px; transition: bottom 0.4s, opacity 0.4s; box-shadow: 0px 0px 15px rgba(0,0,0,0.3);}
.modal.show{bottom: 0; opacity: 1;}
.modal .top-content{background: #34495e; width: 100%; padding: 0 0 30px 0;}
.top-content .left-text{text-align: left; padding: 10px 15px;bfont-size: 18px; color: #f2f2f2; font-weight: 500; user-select: none;}
.top-content .close-icon{position: absolute; top: 10px; right: 20px; font-size: 23px; color: silver; cursor: pointer;}
.close-icon:hover{color: #b6b6b6;}
.top-content .fa-camera-retro{font-size: 80px; color: #f2f2f2;}
.modal .bottom-content{background: white; width: 100%; padding: 15px 20px;}
.bottom-content .text{font-size: 28px; font-weight: 600; color: #34495e;}
.bottom-content p{font-size: 18px; line-height: 27px; color: grey;}
.bottom-content .close-btn{padding: 15px 0;}
.show-btn button, .close-btn button{padding: 9px 13px; background: #27ae60; border: none; outline: none; font-size: 18px; border-radius: 3px; color: #f2f2f2;
font-weight: 600; cursor: pointer; transition: background 0.2s;}
.show-btn button{padding: 12px 15px;}
.show-btn button:hover, .close-btn button:hover{background: #26a65b;}
</style>
</head>

<body>
<div class="show-btn">
<button>Zeige Textbox</button></div>
<div class="modal">
<div class="top-content">
<div class="left-text">HKH</div>
<span class="close-icon"><i class="fas fa-times"></i></span>
<img alt="" height="20%" src="../Bilder/hkhlogo.png" width="26%" /></div>
<div class="bottom-content">
<p>HTML Knowhow ist einfach super.</p>
<div class="close-btn"><button>Schließe Textbox</button></div></div></div>
<script>
$('.show-btn').click(function(){
$('.modal').toggleClass("show");
$('.show-btn').addClass("disabled");
});
$('.close-icon').click(function(){
$('.modal').toggleClass("show");
$('.show-btn').removeClass("disabled");
});
$('.close-btn').click(function(){
$('.modal').toggleClass("show");
$('.show-btn').removeClass("disabled");
});
</script>
</body>

</html>