Блог

Главная - Вопросы по программированию - Как активировать modal для открытия по всем 3 кнопкам, а не только с помощью одной кнопки?

Как активировать modal для открытия по всем 3 кнопкам, а не только с помощью одной кнопки?

#javascript #html #css #events

#javascript #HTML #css #Мероприятия

Вопрос:

Я бы хотел, чтобы модальный режим активировался при нажатии всех 3 кнопок, но, похоже, он не работает. Мне удалось открыть диалоговое окно только при первом нажатии кнопки. Я пытался возиться с Javascript и добавлять разные события, но не могу понять, что я делаю не так?

Также потребуется модальный режим для открытия при нажатии большего количества кнопок в будущем, поскольку мы будем добавлять больше контента на сайт.

 //  Get modal element
const modal = document.getElementById("simpleModal");
// Get open modal button
const modalBtn = document.getElementById("modalBtn");
// Get close btn
const closeBtn = document.getElementsByClassName("closeBtn")[0];

// listen for open click
modalBtn.addEventListener("click", openModal);

// Listen for close click
closeBtn.addEventListener("click", closeModal);

// function to open modal
function openModal() {
  modal.style.display = "block";
}

// Function to close block
function closeModal() {
  modal.style.display = "none";
} 
 #blog {
  background: #fff;
}

.blog-posts {
  display: flex;
  justify-content: center;
}

.blog-content {
  background: #f4f4f4;
  margin: 3rem;
  border-bottom-right-radius: 15px;
}

img {
  border-top-left-radius: 15px;
}

h6 {
  padding-top: 0.2rem;
}

h3 {
  padding-top: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.btn-light {
  padding: 0.5rem 1rem;
  margin: 2rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background: #f4f4f4;
  margin: auto;
  overflow: scroll;
  padding: 20px;
  width: 100%;
  height: 100%;
  animation: modalOpen 1.5s;
}

.closeBtn {
  color: $dark-color;
  float: right;
  margin: 1rem 0.5rem;
  font-size: 50px;
} 
 <section id="blog" class="text-center py-1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <div class="blog-posts">
    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn" class="btn-light">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn" class="btn-light">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn" class="btn-light">READ MORE</button>
    </div>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
    <div id="simpleModal2" class="modal">
      <div class="modal-content">
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
  </div>
</section>

Комментарии:

1. у вас есть дубликаты идентификаторов в вашем html. Это недопустимо.

Ответ №1:

Вы допускаете ошибку, когда даете одинаковый идентификатор элементам дерева! Идентификатор должен быть uniq! Этот момент.

-Чтобы сделать это лучше, используйте getElementsByClassName, чтобы получить все элементы для прикрепления вашего события.

Также создайте определенный класс имен, потому что, если вы используете класс по умолчанию, каждый элемент с этим именем класса будет присоединять событие. Мы хотим прикрепить событие только для имени класса «readMore».

Для передачи аргументов я использую пользовательский атрибут!

Вот исправленный код :

 //  Get modal element
const modal = document.getElementById("simpleModal");
// Get open modal button
var modalBtn = document.getElementsByClassName("readMore");
// Get close btn
const closeBtn = document.getElementsByClassName("closeBtn")[0];

for (var x=0; x < modalBtn.length; x  ) {
  modalBtn[x].addEventListener("click", openModal);
}
 
// Listen for close click
closeBtn.addEventListener("click", closeModal);

// function to open modal
function openModal(event) {

  var content = "";
  var modalPreview = document.getElementById("modalPreview");
  if (event) {
   
    console.log("Look for target element"   event.target);
    console.log("Look for parent element"   event.target.parentNode);

    content = event.target.getAttribute("MyContent");
    
    console.log("Use some data from parent element"   event.target.parentNode.childNodes[0]);
    
    console.log("Use some data from parent element"   event.target.parentNode.childNodes[1]);
    
    console.log("Use some data from parent element"   event.target.parentNode.childNodes[2]);
    
  
  }
  
  modal.style.display = "block";
  
  modalPreview.innerHTML = content;
  
  //  = append
  modalPreview.appendChild(event.target.parentNode.childNodes[1]);
  
}

// Function to close block
function closeModal() {
  modal.style.display = "none";
} 
 #blog {
  background: #fff;
}

.blog-posts {
  display: flex;
  justify-content: center;
}

.blog-content {
  background: #f4f4f4;
  margin: 3rem;
  border-bottom-right-radius: 15px;
}

.readMore {
  color: blue
}

img {
  border-top-left-radius: 15px;
}

h6 {
  padding-top: 0.2rem;
}

h3 {
  padding-top: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.btn-light {
  padding: 0.5rem 1rem;
  margin: 2rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background: #f4f4f4;
  margin: auto;
  overflow: scroll;
  padding: 20px;
  width: 100%;
  height: 100%;
  animation: modalOpen 1.5s;
}

.closeBtn {
  color: $dark-color;
  float: right;
  margin: 1rem 0.5rem;
  font-size: 50px;
} 
 <section id="blog" class="text-center py-1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <div class="blog-posts">
    <div class="blog-content">
      <img src="https://maximumroulette.com/imgs/social/stack.png" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button MyContent=" TEXT 1 " id="modalBtn1" class="btn-light readMore">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="http://maximumroulette.com/imgs/social/linkedin.png" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button MyContent=" TEXT 2 " id="modalBtn2" class="btn-light readMore">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="http://maximumroulette.com/imgs/social/linkedin.png" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button MyContent=" TEXT 3 " id="modalBtn3" class="btn-light readMore">READ MORE</button>
    </div>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div id="modalPreview"></div>
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
    <div id="simpleModal2" class="modal">
      <div class="modal-content">
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
  </div>
</section>

Комментарии:

1. @MPB А если в OP есть 10 кнопок? Вы пишете const modalBtnX = document.getElementById("modalBtnX"); modalBtnX.addEventListener("click", openModal); 10 раз?

2. Что вы имеете в виду, прежде чем оставлять отрицательный комментарий, пожалуйста?

3. А также я попытался добавить другой контент в модальное всплывающее окно, но модальный контент одинаков для каждого модального, как мне добавить другой контент в каждую модель?

4. @NikolaLukic Ты знаешь, почему я не могу публиковать контент по-разному для каждого модального?

5. Я опубликовал передающие аргументы! В console.log («Искать родительский элемент» event.target); Вы также можете получить доступ к родительскому элементу и собрать дополнительные данные!

Ответ №2:

Проблема в том, что у вас есть дубликаты идентификаторов для открытых кнопок. Повторяющиеся идентификаторы не являются допустимым HTML, и именно поэтому. Они могут вызвать нежелательное поведение.

const modalBtn = document.getElementsByID("modalBtn");

будет выбрано только первое вхождение элемента с этим идентификатором. Итак, только первая кнопка.

Вы должны добавить разные идентификаторы и общий класс к кнопкам. Я добавил modal-btn класс к каждой кнопке, которая откроет модальный. Таким образом, он выберет все эти кнопки.

Также атрибуты HTML должны быть не camelCase, а dash case, например this-class 

 //  Get modal element
const modal = document.getElementsByClassName("modal");
// Get open modal button
const modalBtn = document.getElementsByClassName("modal-btn");
// Get close btn
const closeBtn = document.getElementsByClassName("closeBtn");

// listen for open click
for (var i = 0; i < modalBtn.length; i  ) {
  (function() {
    var j = i;
    modalBtn[j].addEventListener("click", function() {
      openModal(j)
    });
  })();

}


// Listen for close click
for (var i = 0; i < closeBtn.length; i  ) {
  (function() {
    var j = i;
    closeBtn[j].addEventListener("click", function() {
      closeModal(j)
    });
  })();

}

// function to open modal
function openModal(j) {

  modal[j].style.display = "block";
}

// Function to close block
function closeModal(j) {
  modal[j].style.display = "none";
} 
 #blog {
  background: #fff;
}

.blog-posts {
  display: flex;
  justify-content: center;
}

.blog-content {
  background: #f4f4f4;
  margin: 3rem;
  border-bottom-right-radius: 15px;
}

img {
  border-top-left-radius: 15px;
}

h6 {
  padding-top: 0.2rem;
}

h3 {
  padding-top: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.btn-light {
  padding: 0.5rem 1rem;
  margin: 2rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background: #f4f4f4;
  margin: auto;
  overflow: scroll;
  padding: 20px;
  width: 100%;
  height: 100%;
  animation: modalOpen 1.5s;
}

.closeBtn {
  color: $dark-color;
  float: right;
  margin: 1rem 0.5rem;
  font-size: 50px;
} 
 <section id="blog" class="text-center py-1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <div class="blog-posts">
    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn" class="btn-light modal-btn">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn2" class="btn-light modal-btn">READ MORE</button>
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <button id="modalBtn3" class="btn-light modal-btn">READ MORE</button>
    </div>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
      a
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
    <div id="simpleModal2" class="modal">
      <div class="modal-content">
      b
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
    <div id="simpleModal3" class="modal">
      <div class="modal-content">
      c
        <span class="closeBtn"><i class="fas fa-times-circle"></i></span>
      </div>
    </div>
  </div>
</section>

Комментарии:

1. Это сработало, но как мне редактировать содержимое по-разному для каждого элемента, поскольку при вводе моего содержимого оно изменилось для всех элементов для модального?

2. @MPB ну, конечно. Потому что вы все время открываете один и тот же модальный с ID #simpleModal .

3. Я думаю, я понимаю, что вы имеете в виду, я попробую отредактировать себя, как вы можете сказать, я все еще новичок в javascript

4. Я пытался возиться с идентификаторами, но, похоже, не могу найти свой ответ?

5. @MPB можете ли вы более конкретно указать желаемый результат?

Ответ №3:

Вам не нужно писать какой-либо скрипт, чтобы открыть окно модели. Вы можете реализовать свою функциональность, используя только CSS.

Вот пример.

 	#blog {
  background: #fff;
}

.blog-posts {
  display: flex;
  justify-content: center;
}

.blog-content {
  background: #f4f4f4;
  margin: 3rem;
  border-bottom-right-radius: 15px;
}

img {
  border-top-left-radius: 15px;
}

h6 {
  padding-top: 0.2rem;
}

h3 {
  padding-top: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.btn-light {
  padding: 0.5rem 1rem;
  margin: 2rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background: #f4f4f4;
  margin: auto;
  overflow: scroll;
  padding: 20px;
  width: 100%;
  height: 100%;
  animation: modalOpen 1.5s;
}

.closeBtn {
  color: $dark-color;
  float: right;
  margin: 1rem 0.5rem;
  font-size: 50px;
}

.modelinput{display:none;}
.modelinput:checked   .modal_wrap{display:block;}
.btn{display:inline-block; padding:4px 10px; background:#cc3333; margin:auto; color:#fff; border-radius:3px;}
.btnwrap{text-align:center; margin-bottom:10px;} 
 <section id="blog" class="text-center py-1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <div class="blog-posts">
    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <div class="btnwrap"><label class="btn" for="modelbox">Read More</label></div>
	  
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <div class="btnwrap"><label class="btn" for="modelbox">Read More</label></div>
    </div>

    <div class="blog-content">
      <img src="./img/blog.jpg" alt="blog" />
      <h6>APRIL 2019</h6>
      <h3>How we can help you</h3>
      <div class="btnwrap"><label class="btn" for="modelbox">Read More</label></div>
    </div>
	
	<input type="checkbox" class="modelinput" id="modelbox" />
    <div id="simpleModal" class="modal modal_wrap">
      <div class="modal-content">
        <span class="closeBtn"><label for="modelbox"><i class="fas fa-times-circle"></i></label></span>
      </div>
    </div>
  </div>
</section>

Читать подробно https://www.growyourgk.com/css/simple-popup-without-javascript /

Ответ №4:

Вы использовали один и тот же идентификатор для всех кнопок, но идентификаторы должны быть уникальными. Сначала вы должны это изменить.

Теперь вы можете решить, хотите ли вы получать элементы по идентификатору (теперь это была самая быстрая настройка для меня: https://jsfiddle.net/2kt6fqhz/2 /) или по имени класса. Если вы получаете их по имени класса, довольно легко настроить прослушиватели событий на столько кнопок / элементов, сколько захотите. Я рекомендую второй вариант.

пример:

 <div class="blog-content">
  <img src="./img/blog.jpg" alt="blog" />
  <h6>APRIL 2019</h6>
  <h3>How we can help you</h3>
  <button id="modalBtn1" class="btn-light">READ MORE</button>
</div>

<div class="blog-content">
  <img src="./img/blog.jpg" alt="blog" />
  <h6>APRIL 2019</h6>
  <h3>How we can help you</h3>
  <button id="modalBtn2" class="btn-light">READ MORE</button>
</div>

<div class="blog-content">
  <img src="./img/blog.jpg" alt="blog" />
  <h6>APRIL 2019</h6>
  <h3>How we can help you</h3>
  <button id="modalBtn3" class="btn-light">READ MORE</button>
</div>

Ответ №5:

Изменение модального содержимого

В ситуации, когда у вас много кнопок, которые запускают один и тот же модальный режим с немного другим содержимым? Используйте event.relatedTarget и HTML data-* атрибуты для изменения содержимого модального в зависимости от нажатия кнопки.

проверьте эту ссылку

Метки: ,