0

please don't close it with "use jquery to close DIV " example. As I can only use HTML code on my page.

can anyone help me to find the code which close DIV (message box) when clicked outside. > > And these current 4 buttons are not aligned in the same line > is there any code to align the buttons in one line as well Thanks 

.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';">&times;</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';">&times;</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';">&times;</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';">&times;</span>Message 4 </div>
Learning curb
  • 5
  • 3
  • Simply add `onblur = "document.getElementById('alert1').style.display='none'"` to button 1 (and also the other buttons using 2,3,4)... Does not look very nice, certainly not the preferred use, but that is what u asked for. – Rene van der Lende Feb 21 '20 at 01:15
  • If you want the buttons to align, you need to put the buttons separate from the alerts inside a `div` and the alerts inside another. The way you constructed it now won't do the trick. – Rene van der Lende Feb 21 '20 at 01:22

1 Answers1

0

The quick and dirty (especially dirty) solution for both your questions is as follows:

1) put the "alerts" in a separate div below the buttons to keep them aligned

2) add onblur = "document.getElementById('alertxxxxxx').style.display='none'"

to you button elements.

.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'" onblur="document.getElementById('alert1').style.display='none'">Button1</button>
<button onclick="document.getElementById('alert2').style.display='block'" onblur="document.getElementById('alert2').style.display='none'">Button2</button>
<button onclick="document.getElementById('alert3').style.display='block'" onblur="document.getElementById('alert3').style.display='none'">Button3</button>
<button onclick="document.getElementById('alert4').style.display='block'" onblur="document.getElementById('alert4').style.display='none'">Button4</button>
<div>
  <div id="alert1" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>Message 1 </div>
  <div id="alert2" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>Message 2 </div>
  <div id="alert3" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>Message 3 </div>
  <div id="alert4" class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>Message 4 </div>
</div>
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
  • Thanks a lot it is aligned now , However on my page it is not closing automatically when we click outside ( so the mouse click works) but when use it on touch screen phone it does not close when touch tap outside. Also when tap on multiple buttons it opens the alert for all of the buttons clicked. Is there anything you can recommend. Or do you know what is causing this issue. Thanks a lot – Learning curb Feb 22 '20 at 17:35
  • The stacking of the alert windows is caused by the way you constructed the code. As you wanted a 'html-only' that is a side effect. It would be better to create javascript inside the doc and attach some `eventListener` to the buttons. 'clicks' are indeed not 'taps'. Need to dig into that subject, maybe it is another 'on...=' that needs to be used instead of 'onclick'. – Rene van der Lende Feb 22 '20 at 23:08
  • Can you please advise or add any another way of coding it. Will be really appreciated – Learning curb Feb 23 '20 at 11:44
  • Create a `` in your document and you can do all the programming you want. Further read [What is the difference between](https://stackoverflow.com/questions/12422944/). Need to create something like that in your doc. There is no easy way.... – Rene van der Lende Feb 23 '20 at 13:08
  • will try with – Learning curb Feb 23 '20 at 13:12
  • Unfortunately there are little shortcuts in learning to develop software. When I see some interesting behaviour on sites I visit, I frequently have a look at the source. Furthermore, [Codepen](https://codepen.io/) has a large user base with many,many short examples of HTML/CSS/JS created by the community, well worth your time. [CSS-tricks](https://css-tricks.com/) likewise. You can spend weeks on those two without doing any coding yourself... Success! – Rene van der Lende Feb 23 '20 at 13:21