Add popup with close button in the HTML page

The following code can be used to show the popup with close button in the HTML page.

HTML:

 <div class="popup-container" id="popupContainer">
      <p id="popupMessage"></p>
      <button id="closeButton" class="btn btn-secondary" onclick="hidePopup()">Close</button>
    </div>

CSS:

  .popup-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #d3d3d3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
  }

JS code:

/**
 * Hides the currently displayed popup and overlay.
 *
 * @returns {void}
 */
function hidePopup() {
    try {
        document.getElementById('popupContainer').style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
    } catch (e) {
        console.error('error @ hidePopup', e);
    }
}


/**
 * Function is used to show popup in page
 * @param {*} type type of popup error or success
 * @param {*} message message in the popup
 */
function showPopup(type, message) {
    try {
        document.getElementById('popupMessage').innerText = message;
        document.getElementById('popupContainer').className = 'popup-container ' + type;
        document.getElementById('popupContainer').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('closeButton').style.display = 'none';
    } catch (e) {
        console.error('error @ showPopup', e);
    }
}