JavaScript Alert Prompt

This JavaScript code snippet helps you to create an alert prompt. It is written in JavaScript and its purpose is to add a functionality to a modal box. It first selects the modal box element from the HTML document using its id and assigns it to the ‘modalView’ variable. Then it selects the close button element of the modal box and assigns it to the ‘closeBtn’ variable. The code adds an event listener to the close button which listens for a ‘click’ event and when that event is triggered, it sets the display style of the modal view to ‘none’, effectively hiding the modal box from the user.

Finally, this code will enable the user to close the modal box by clicking on the ‘X’ button.

How to Create JavaScript Alert Prompt

Create the HTML structure for the alert prompt as follows:

<div class="modalView" id="modalView">
  <div id="modalView__closeBtn"></div>
  <div class="modalView__content centered">
    <!--     <h1>THIS IS A TITLE</h1> -->
    <p>This is some text in this simple modal!</p>
  </div>
</div>

Now, style the alert prompt using the following CSS styles:

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  background: #e9e7df;
}

.modalView {
  width: 300px;
  position: absolute;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  background: #6f1d93;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
  font-size: 1.2rem;
  -webkit-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
  -moz-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
  box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
}

.modalView > .modalView__content {
  color: white;
  font-weight: bold;
}
.modalView > .modalView__content.centered {
  text-align: center;
}

.modalView__content h1 {
  font-size: 1.5rem;
  padding-bottom: 10px;
}
.modalView__content p {
  font-size: 1rem;
}

#modalView__closeBtn {
  position: absolute;
  background: #000000;
  width: 35px;
  border-radius: 35px;
  height: 35px;
  right: -17px;
  top: -17px;
  color: white;
}

#modalView__closeBtn {
  cursor: pointer;
}
#modalView__closeBtn:after,
#modalView__closeBtn:before {
  content: "";
  height: 20px;
  width: 20px;
  border-top: 3px solid #ffffff;
  position: absolute;
  top: 13px;
  right: 0px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#modalView__closeBtn:before {
  color: white;
  right: 14px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#modalView__closeBtn:hover {
  background-color: green;
}

Finally, add the following JavaScript function for its functionality:

// Just some basic JS that will help you close the modal when pressing the X button

const modalView = document.getElementById("modalView");

const closeBtn = document.getElementById("modalView__closeBtn");

closeBtn.addEventListener("click", () => {
  modalView.style.display = "none";
});

That’s all! hopefully, you have successfully created the JavaScript alert prompt. If you have any questions or suggestions, feel free to comment below.