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';'>&times
          </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;
}

CodePudding user response：

I think it should be like :

this.parentElement.style.display='none'

CodePudding user response：

Try this:

echo "<div class='alert'>
          <span class='closebtn' onclick='this.parentElement.style.display=`none`;'>&times
          </span>New Customer saved successfully
      </div>";

CodePudding user response：

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.

<?php
// Some PHP code
?>

    <div >
        <span  onclick="this.parentElement.style.display='hidden';">&times;
        </span>New Customer saved successfully
    </div>

<?php
// Some more PHP code
?>

The end result will be the same as using echo, but without the extra hassle.

The benefits of this are:

• You don't need to handle the quotes any differently than you would in any ordinary HTML file.
• Your IDE will be able to syntax highlight the HTML as well, making it easier to read and find potential typos etc.