Блог

Извините, что пришлось опубликовать еще раз, потому что я не получил соответствующего ответа на свой последний пост, но у меня есть 2 модальности, добавленные в мой нижний колонтитул, например, когда вы нажимаете на кнопку, тогда появляется модал с дополнительной информацией. Модальными кнопками являются Subscribe и mouth off, но когда вы нажимаете subscribe, тогда отображается модальный параметр mouthoff вместо модального параметра subscribe.

Я попытался переименовать модальности и поискал в Интернете, включая here и youtube, но, похоже, ничего не работает. Процедура, которой я следовал для создания модальностей, былаhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom и я хочу, чтобы все мои модальности были такого дизайна.

Редактировать: у меня есть модальности, чтобы показывать там отдельный контент, но теперь, когда нажата кнопка подписаться, она открывается, но модальный режим не закрывается при нажатии на модальный режим или на X. Мой обновленный код приведен ниже

Мой HTML-код:

  <footer>
  <div class="container">
    <div class="social">
      <ul>
        <li><a href=""><i class="fab fa-facebook"></i></a></li>
        <li><a href=""><i class="fab fa-twitter"></i></a></li>
        <li><a href=""><i class="fab fa-instagram"></i></a></li>
        <li><a href=""><i class="fab fa-youtube"></i></a></li>
        <li><a href=""><i class="fab fa-twitch"></i></a></li>
      </ul>
      </div>
      <div class=" footer-nav">
        <ul>
          <li><button id="subscribe-button">Subscribe</button><div id="subscribe-modal" class="modal"><div class="modal-content"><div class="modal-header"><span class="close">amp;times;</span></div><div class="modal-body"><h3>SUBSCRIBE TO THE Thunder Struck Games MAILING LIST</h3>
                    <p>Welcome to the Rockstar Games Subscription Management page. Rockstar mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p><a href="#" class="manage-button">Manage Your Account</a></div><div class="modal-footer"></div></div></div></li>
          <li><a href="#" target="_blank">Support</a></li>
          <li><a href="#" target="_blank">Careers</a></li>
          <li><button id="mouthoff-button">Mouthoff</button><div id="mouthoff-modal" class="modal"><div class="modal-content"><div class="modal-header"><span class="close">amp;times;</span></div><div class="modal-body"><h3>MOUTHOFF - TELL US WHAT'S ON YOUR MIND</h3>
                    <p>Welcome to the Rockstar Games Subscription Management page. Rockstar mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p><a href="#" class="manage-button">Manage Your Account</a></div><div class="modal-footer"></div></div></div></li>
  

Мой CSS-код:

 .footer-nav li{
  list-style: none;
  display: inline-block;
  margin-top: 10px;
  padding: 5px;
  font-size: 11.25px;
  font-weight: bold;
}
.footer-nav a {
  display: inline-block;
  color: #000;
}
button {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #000;
}
.modal {
  display: none; /* 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: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}
.modal-body h3 {
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}
.modal-body p {
  text-align: justify;
  margin-top: 10px;
  font-size: 15px;
  margin-left: 250px;
  margin-right: 250px;
}
.manage-button {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-right: 25px;
  margin-top: -40px;
  cursor: pointer;
  margin-left: 850px;
  margin-top: 25px;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}
.modal-body a:hover {
  background-color: #000;
  color: #fff;
}
}
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
  

Мой код Javascript:

 // Get the Subscribe modal
var subscribeModal = document.getElementById('subscribe-modal');

// Get the button that opens the modal
var subscribeBtn = document.getElementById("subscribe-button");

// Get the <span> element that closes the modal
var subscribeSpan = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
subscribeBtn.onclick = function() {
  subscribeModal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  subscribeModal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == subscribeModal) {
    subscribeModal.style.display = "none";
  }
}
// Get the Mouthoff modal
var mouthoffModal = document.getElementById('mouthoff-modal');

// Get the button that opens the modal
var mouthoffBtn = document.getElementById("mouthoff-button");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
mouthoffBtn.onclick = function() {
  mouthoffModal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  mouthoffModal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == mouthoffModal) {
    mouthoffModal.style.display = "none";
  }
}
  

Любая помощь приветствуется и заранее благодарю вас и еще раз приношу извинения за повторную публикацию

Возможно, используйте другое имя переменной для mouth-button и mouth-modal.