How to make a custom pop up when a button is clicked?

Question

I have a webpage with a lot of buttons on it and I've made a custom popup that should popup in the center of the screen when a button is clicked. Ideally the screen darkens when the window comes up and you can click off anywhere on the screen to make the window go away.

How is this done? Below is a snippet of my buttons + the popup I'd like to display when a button is pressed. The CSS window has display:hidden at the moment however.

var containerDiv = document.querySelector("#main");
let tempCounterBtn = 0;
for (let i = 0; i < 2; i++) {
  let newDiv = document.createElement("div");
  newDiv.id = "div-" + (i + 1);
  containerDiv.appendChild(newDiv);
  for (let x = 0; x < 6; x++) {
    let btn = document.createElement("button");
    btn.id = "button-" + (tempCounterBtn + 1);
    tempCounterBtn++;
    newDiv.appendChild(btn);
  }
}

body {
    display: flex;
    justify-content: center;
    margin: 1.2em;
}

button {
    background: rgba(0, 0, 0, 0);
    color: #a5afaa;
    border: 1px solid white;
    border-radius: .6em;
    padding: 3em;
}

button:hover {
    border-color: #fff8cc;
    box-shadow: 0em 0em 1em 0em yellow;
}

#main {
    border: solid 2px #939388;
    border-radius: 10px;
    background-color: #0f0f3de8;
    box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}

.inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}


.smallFrame {
    display: none;
    border: solid 2px #939388;
    border-radius: 10px;
    background-color: #0f0f3de8;
    box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
    width: 400px;
    height: 250px;
}

user_2813224 · Answer

Changes

div#main has been changed to dialog#main.

is a built-in HTML tag and is normally hidden unless it has the open attribute or has been opened by one of it's methods either .showModal() or .show(). .showModal() is what you'd be interested in because there's a special CSS property that only applies to fullscreen backgrounds or a dialog's backdrop -- it's appropriately called ::backdrop (see CSS of example).

Added 2 buttons one to close the

and another to open it.

Added a flag which is true to start out at then once the

opens that button generating function starts and then that flag is set to false. I had to stop it because I'm not sure if you wanted it to keep making buttons every time the opens or not. Anyways, the flag is easily removed or you could adjust the conditions in which the flag is set to.

const modal = document.querySelector(".smallFrame");
const show = document.querySelector('.show');
const hide = document.querySelector('.hide');

let flag = true;
show.onclick = popUp;
hide.onclick = e => modal.close();

function popUp(e) {
  modal.showModal();
 
  if (!flag) {
    return;
  }
  let tempCounterBtn = 0;
  for (let i = 0; i < 2; i++) {
    let newDiv = document.createElement("div");
    newDiv.id = "div-" + (i + 1);
    modal.appendChild(newDiv);
    for (let x = 0; x < 6; x++) {
      let btn = document.createElement("button");
      btn.id = "button-" + (tempCounterBtn + 1);
      tempCounterBtn++;
      newDiv.appendChild(btn);
    }
  }
  flag = false;
}

html {
  font: 300 2ch/1.25 'Segoe UI'
}

body {
  display: flex;
  justify-content: center;
  margin: 1.2em;
}

button {
  background: rgba(0, 0, 0, 0);
  color: #a5afaa;
  border: 1px solid white;
  border-radius: .6em;
  padding: 3em;
}

button:hover {
  border-color: #fff8cc;
  box-shadow: 0em 0em 1em 0em yellow;
}

#main {
  border: solid 2px #939388;
  border-radius: 10px;
  background-color: #0f0f3de8;
  box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}

#main::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.smallFrame {
  border: solid 2px #939388;
  border-radius: 10px;
  background-color: #0f0f3de8;
  box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
  width: 400px;
  height: 250px;
}

.hide {
  padding: 0.5em;
  float: right;
}

.show:hover,
.hide:hover {
  border-color: #fff8cc;
  box-shadow: 0em 0em 1em 0em lime;
  cursor: pointer;
}

How to make a custom pop up when a button is clicked?

1 Answers

Changes