This div is made to popup a message and be closed staright after. It works perfectly fine in JSFiddle but when I use it on my webpage it doesn’t allow the user to close the message. I think it has something to do with the fact that I am doing through an echo
but I can’t see the issue. If there is a way to autoclose the message that would work then that would be great too. Thanks in advance!
Here is the code
echo "<div class='alert'>
<span class='closebtn' onclick='this.parentElement.style.display='hidden';'>×
</span>New Customer saved successfully
</div>";
.alert {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background-color: #324376;
color: white;
margin-bottom: 15px;
width: 40%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 10px;
right: 10px;
border-radius: 5px;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
3
Answers
I think it should be like :
Try this:
An even easier and, in my opinion, better solution would be to not echo the HTML through PHP in the first place. Just close the PHP block, write the HTML you want and then open the PHP tag again, if you need to.
The end result will be the same as using
echo
, but without the extra hassle.The benefits of this are: