Update Kommentar
Tag,
ich habe kurz ein Update Skript geschrieben, sodass man sein Kommentar bearbeiten kann.
Jetzt weiß ich nicht wie ich es machen soll, dass wenn ich auf den Button „bearbeiten“ klicke, erstmal ein Textfeld kommt, wo eig. Der Kommentar stand und dann halt absenden kann mit ENTER oder halt einen Button.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.one {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background .modal {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out .modal-background .modal {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal h2 {
font-size: 25px;
line-height: 25px;
margin-bottom: 15px;
}
#modal-container .modal-background .modal p {
font-size: 18px;
line-height: 22px;
}
@keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
@keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
</style>
<section class="delete_comment">
<form action="" method="POST">
<p class="update_and_delete">
<button type="submit" name="update_comment" class="update_btn" value="11111"><i class="fas fa-pen-square"></i></button>
<button type="submit" name="delete_comment" class="comment_delete_btn" value="22222"><i class="fas fa-times"></i></button>
</p>
<!-- Hier ist das Kommentar Feld zum bearbeiten -->
<p><input type="text" name="comment_update" class="update_comment_box" placeholder="Kommentar Bearbeiten"></p>
<!-- Ende Kommentar Feld -->
</form>
<p></p>
</section>
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<form action="" method="POST">
<p><input type="text" name="comment_update" class="update_comment_box" placeholder="Kommentar Bearbeiten"></p>
<!-- Ende Kommentar Feld -->
<button type="submit" id="senden">
Senden
</button></form>
</div>
</div>
</div>
<script>
$("input[name='comment_update']").click(function(){
$('#modal-container').removeAttr('class').addClass('one');
});
$('#senden').click(function(){
$('#modal-container').addClass('out');
$('body').removeClass('modal-active');
});
</script>