How to display a nonmodal / modeless HTML / JavaScript dialogue

Question

I've created a modal dialogue from an example on w3schools. But I have been unable to find guidance on how to make it non-modal. I.e. is it possible that the dialogue can be shown and I can still press the link in the background?

In reality what I am trying to achieve is to allow for links inside the dialogue to be clickable and for the JavaScript on the main page behind it to react to those events.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>
/* The Modal (background) */
.modal {
  display:block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: 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/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

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

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

<body>
    <a href='#'>Press me press me I am blocked</a>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <span class="close" onclick="modalHide()">&times;</span>
        <div id="modtext">Some text in the Modal..</div>
        </div>
    </div>
    <script>
    function modalHide(){
        document.getElementById("myModal").style.display = "none";
    }
    </script>
</body>

</html>

score 5 · Accepted Answer · answered Apr 19 '20 at 12:44

Just remove (.modal) modal background as it is working as a overlay.

/* The Modal (background) */
.modal {
  display:block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

Above code is creating a overlay and showing the dialog inside it. If you remove it your link behind dialog will work.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>


/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

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

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

<body>
    <a href='#'>Press me press me I am blocked</a>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <span class="close" onclick="modalHide()">&times;</span>
        <div id="modtext">Some text in the Modal..</div>
        </div>
    </div>
    <script>
    function modalHide(){
        document.getElementById("myModal").style.display = "none";
    }
    </script>
</body>

</html>

How to display a nonmodal / modeless HTML / JavaScript dialogue

1 Answers1