Блог

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

Как добавлять и удалять другой текст во всплывающее окно?

#javascript #html

Вопрос:

У меня есть серия снимков головы для списка художников, и на каждом из снимков головы есть кнопка, которая открывает всплывающее окно с их биографией. В настоящее время я создаю элементы и добавляю их в раздел содержимого внутри всплывающего окна. Моя проблема в том, что в настоящее время требуется два клика, чтобы создать текст биографии и добавить его во всплывающее окно. Это связано с тем, что при первом щелчке на кнопку добавляется прослушиватель событий, а затем при втором щелчке запускается функция добавления их биографии. Как добавить текст при первом щелчке мыши?

 const jessica1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis turpis." ;
const jessica2 = "Vestibulum viverra tempus maximus. Nullam maximus ligula id ipsum posuere, ut vulputate tellus elementum.";

const genevieve1 = "In hac habitasse platea dictumst. Aliquam nec metus in dui egestas dictum at non neque. Nunc gravida maximus ante semper facilisis.";
const genevieve2 = "Sed augue nisl, pellentesque vitae elementum sed, scelerisque pretium velit.";

const monica1 = "Mauris pharetra velit at feugiat pellentesque. Nullam non mi sed dolor molestie auctor.";

function togglePopUp() {
  const selection = document.getElementsByClassName("pink-btn");
  
  for (let i = 0; i < selection.length; i  ) {
     selection[i].addEventListener("click", function() {
        const popup = document.getElementById('popup-1');
        popup.classList.toggle('active');
        
        if (selection[i].value === "jessica") {
          let p1 = document.createElement('p');
          p1.append(jessica1);
          p1.classList.add('p-child');

          let p2 = document.createElement('p');
          p2.append(jessica2);
          p2.classList.add('p-child');
          
          const bio = document.getElementById('modal-body');
          bio.append(p1, p2)

          const title = document.createElement("h3");
          title.setAttribute('id', 'modal-title');
          title.append('Jessica');
          document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "genevieve") {

                let p1 = document.createElement('p');
                p1.append(genevieve1);
                p1.classList.add('p-child');

                let p2 = document.createElement('p');
                p2.append(genevieve2);
                p2.classList.add('p-child');


                const bio = document.getElementById('modal-body');
                bio.append(p1, p2)

                const title = document.createElement("h3");
                title.setAttribute('id', 'modal-title');
                title.append('Genevieve');
                document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "monica") {
                let p1 = document.createElement('p');
                p1.append(monica1);
                p1.classList.add('p-child');

                const bio = document.getElementById('modal-body');
                bio.append(p1);

                const title = document.createElement("h3");
                title.setAttribute('id', 'modal-title');
                title.append('Monica');
                document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "close") {
                const body = document.getElementsByClassName('p-child');
                body.remove();

                const title = document.getElementById('modal-title');
                title.remove();
        }
     })
  }
} 
 .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  display: inline-block;
}

.img-wrap {
  text-align: center;
  margin: 0 10px 10px;
  border-radius: 2px;
  background: #000;
  display: flex;
  flex-direction: column;
}

.pink-btn {
  background: #fae5d8;
  color: #000;
  border: none;
  outline: none;
  font-family: "BreweryCom-Black";
  font-size: 22px;
  padding: 10px 20px;
  
}

.text-wrap {
  text-align: left;
  font-size: 18px;
  margin: 0 5px;
  padding-top: 5px;
}


.popup .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  background: #fff;
  z-index: 2;
  text-align: center;
  padding: 20px 30px;
  box-sizing: border-box;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: none;
  outline: none;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

.modal-body {
    text-align: left;
}

.modal-body p {
    font-size: 18px;
} 
 <div id="team-page" class="page-width">

  <div class="card-container">
    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="jessica">Jessica</button>
    </div>

    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="genevieve">Genevieve</button>
    </div>

    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="monica">Monica</button>
    </div>
  </div>

  <div class="popup" id="popup-1">
      <div class="overlay"></div>
      <div class="content">
          <button class="close-btn" onclick="togglePopUp();" value="close">amp;times;</button>
          <div id="modal-header"></div>
          <p id="modal-body" class="modal-body"></p>
      </div>
  </div>

</div>

Ответ №1:

Вызовите свою функцию в первом монтировании, затем она откроет всплывающее окно с первым щелчком мыши.

 window.onload = togglePopUp;
 
 const jessica1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis turpis." ;
const jessica2 = "Vestibulum viverra tempus maximus. Nullam maximus ligula id ipsum posuere, ut vulputate tellus elementum.";

const genevieve1 = "In hac habitasse platea dictumst. Aliquam nec metus in dui egestas dictum at non neque. Nunc gravida maximus ante semper facilisis.";
const genevieve2 = "Sed augue nisl, pellentesque vitae elementum sed, scelerisque pretium velit.";

const monica1 = "Mauris pharetra velit at feugiat pellentesque. Nullam non mi sed dolor molestie auctor.";
window.onload = togglePopUp;

function togglePopUp() {
  const selection = document.getElementsByClassName("pink-btn");
  
  for (let i = 0; i < selection.length; i  ) {
     selection[i].addEventListener("click", function() {
        const popup = document.getElementById('popup-1');
        popup.classList.toggle('active');
        
        if (selection[i].value === "jessica") {
          let p1 = document.createElement('p');
          p1.append(jessica1);
          p1.classList.add('p-child');

          let p2 = document.createElement('p');
          p2.append(jessica2);
          p2.classList.add('p-child');
          
          const bio = document.getElementById('modal-body');
          bio.append(p1, p2)

          const title = document.createElement("h3");
          title.setAttribute('id', 'modal-title');
          title.append('Jessica');
          document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "genevieve") {

                let p1 = document.createElement('p');
                p1.append(genevieve1);
                p1.classList.add('p-child');

                let p2 = document.createElement('p');
                p2.append(genevieve2);
                p2.classList.add('p-child');


                const bio = document.getElementById('modal-body');
                bio.append(p1, p2)

                const title = document.createElement("h3");
                title.setAttribute('id', 'modal-title');
                title.append('Genevieve');
                document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "monica") {
                let p1 = document.createElement('p');
                p1.append(monica1);
                p1.classList.add('p-child');

                const bio = document.getElementById('modal-body');
                bio.append(p1);

                const title = document.createElement("h3");
                title.setAttribute('id', 'modal-title');
                title.append('Monica');
                document.getElementById('modal-header').append(title);
        }
        
        else if (selection[i].value === "close") {
                const body = document.getElementsByClassName('p-child');
                body.remove();

                const title = document.getElementById('modal-title');
                title.remove();
        }
     })
  }
} 
 .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  display: inline-block;
}

.img-wrap {
  text-align: center;
  margin: 0 10px 10px;
  border-radius: 2px;
  background: #000;
  display: flex;
  flex-direction: column;
}

.pink-btn {
  background: #fae5d8;
  color: #000;
  border: none;
  outline: none;
  font-family: "BreweryCom-Black";
  font-size: 22px;
  padding: 10px 20px;
  
}

.text-wrap {
  text-align: left;
  font-size: 18px;
  margin: 0 5px;
  padding-top: 5px;
}


.popup .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  background: #fff;
  z-index: 2;
  text-align: center;
  padding: 20px 30px;
  box-sizing: border-box;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: none;
  outline: none;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

.modal-body {
    text-align: left;
}

.modal-body p {
    font-size: 18px;
} 
 <div id="team-page" class="page-width">

  <div class="card-container">
    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="jessica">Jessica</button>
    </div>

    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="genevieve">Genevieve</button>
    </div>

    <div class="card">
      <div class="img-wrap">
        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" alt="person" />
      </div>
        <button class="pink-btn" onclick="togglePopUp();" value="monica">Monica</button>
    </div>
  </div>

  <div class="popup" id="popup-1">
      <div class="overlay"></div>
      <div class="content">
          <button class="close-btn" onclick="togglePopUp();" value="close">amp;times;</button>
          <div id="modal-header"></div>
          <p id="modal-body" class="modal-body"></p>
      </div>
  </div>

</div>
Метки: