Javascript: Avoiding multiple pop up boxes / check if div is empty

Question

I created a pop up box that appears when a user clicks a button. Currently I am able to get the box to appear but when the user closes it and re-opens it the code is ran through again and another box is stacked on top of the old one.

What I want to do is make it so no matter how many times the user clicks the box it only shows one box... my thoughts was maybe checking if it was empty similar to How do I check if an HTML element is empty using jQuery? however that has not worked so far.

Any suggestions for a noob idiot? Appreciation for all responses in advance.

<button onclick="popup()">text</button>

<script>
var box = document.getElementById('popupbox');

function popup(){
  box.style.display = "block";
  var content = document.createElement('div');
  content.className = 'boxstyle';
  content.innerHTML = ' ...a handful of tags...';
  box.appendChild(content);}

function exit(){
box.style.display = "none";}
</script>

Do you have a third party library creating the popup? It would be helpful if you could create a snippet in the question (`<>` through edit menu) or a JS fiddle (https://jsfiddle.net). — Nisarg Shah, Nov 18 '17 at 05:42
Hello and thank you for your response. That is actually the majority of the code there other than a button that calls on the function containing this code. Although I can create create a demonstration if need be. — Scott White, Nov 18 '17 at 05:43
it will be helpful if you create a working example using jsfiddle — brk, Nov 18 '17 at 05:43
Wow, I just spent twenty+ minutes copy and pasting from my test.html and trying to get what unmistakably works in chrome, firefox, and even IE11... Let me see if I can better revise my question since re-reading it I was right to call myself a noob idiot. — Scott White, Nov 18 '17 at 06:09
Your popup function is creating a new div. So each time your popup function is called it will create a new popup. So either you make the popup div in your html and make it display none. So when some one click on the button you just show it and not create new. Or in your exit function you have to destroy that popup element each time. — Bharat, Nov 18 '17 at 07:18
Thanks Bharat! I actually figured out how to do the latter of your suggestions by destroying everything each time it is called... works awesomely now! Much appreciation to you, brk, and Nisarg Shah for your replies! — Scott White, Nov 18 '17 at 07:32
@ScottWhite Glad to know you solve the problem. I'd suggest you delete the question if it was just a mistake. Else, if you feel that your solution might help future readers, you can post an answer explaining how you solved the problem (with relevant code). — Nisarg Shah, Nov 18 '17 at 10:12

score 0 · Answer 1 · answered Nov 18 '17 at 07:04

You can create a popup using a modal as follows. I just copied code from here

<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

score 0 · Answer 2 · answered Nov 18 '17 at 07:31

I actually managed to solve it by simply tossing in box.innerHTML = '' right after the block appears so that it has a clean slate to work with. I was trying to go a little more elegant and seeking to use an If/Else statement but in the end it seems to work. Much appreciation for all who answered / commented, you all are awesome!

<button onclick="popup()">text</button>

<script>
var box = document.getElementById('popupbox');

function popup(){
  box.style.display = "block";
  box.innerHTML = '';
  var content = document.createElement('div');
  content.className = 'boxstyle';
  content.innerHTML = ' ...a handful of tags...';
  box.appendChild(content);}

function exit(){
  box.style.display = "none";}

Javascript: Avoiding multiple pop up boxes / check if div is empty

2 Answers2