Как отобразить немодальный / немодальный HTML / JavaScript диалог - PullRequest
Новая
       35

Как отобразить немодальный / немодальный HTML / JavaScript диалог

0 голосов
/ 19 апреля 2020

Я создал модальный диалог на примере w3schools. Но я не смог найти руководства о том, как сделать его немодальным. Т.е. возможно ли, что диалог может быть показан, и я все еще могу нажать на ссылку в фоновом режиме?

На самом деле я пытаюсь добиться того, чтобы ссылки внутри диалога были кликабельными, а JavaScript на главной странице позади него реагировал на эти события. 

<!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>

1 Ответ

1 голос
/ 19 апреля 2020

Просто удалите (.modal) модальный фон, так как он работает как наложение. 

/* 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 */
}

Над кодом создается наложение и отображается диалоговое окно внутри него. Если вы удалите его, ваша ссылка за диалогом будет работать. 

<!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>
...