Can anyone assist me in finding a way to close a DIV (message box) when clicked outside of it? Additionally, the current buttons are not aligned in the same line. Is there a code available to align all buttons in one line?
I am looking for a solution that does not involve using jQuery as I can only implement HTML code on my page. Any help would be appreciated!
.alert { display: none; padding: 20px; background-color: #f44336; color: white; } .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }<button onclick="document.getElementById('alert1').style.display='block'">Button1</button> <div id="alert1" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>Message 1 </div> <button onclick="document.getElementById('alert2').style.display='block'">Button2</button> <div id="alert2" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>Message 2 </div> <button onclick="document.getElementById('alert3').style.display='block'">Button3</button> <div id="alert3" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>Message 3 </div> <button onclick="document.getElementById('alert4').style.display='block'">Button4</button> <div id="alert4" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>Message 4 </div>