Блог

Главная - Вопросы по программированию - Нужно дублировать созданный мной модал, но я не уверен, какие атрибуты необходимо изменить для этого? Нужно продублировать его 3 раза

Нужно дублировать созданный мной модал, но я не уверен, какие атрибуты необходимо изменить для этого? Нужно продублировать его 3 раза

#javascript #html #jquery #css #modal-dialog

Вопрос:

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

Это код в теле (кнопка CTA)

 <!-- Trigger the modal with a button -->
<button id="modal-btn" class="button"> LEARN MORE</button>

Это код для Модального…

 <!-- JQUERY SCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- BEGIN CSS STYLES -->
<style>
.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  z-index: 100;
  background-color: white;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: scroll;
}
.modal-content {
  position: relative; 
  padding: 10px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}
.close-btn {
  float: right;
  padding-right: 50px; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.button {
  background-color: #04347b; /* Blue */
  border: none;
  color: white;
  padding: 12px 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
</style>
<!-- END CSS STYLES -->

<!-- BEGIN MODAL -->
<div class="modal">
<div class="modal-header">
    <span class="close-btn">amp;times;</span>
  </div>
  
<div class="modal-content">
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<div class="col-sm-12 col-md-12"><h2>Physiotherapy</h2></div>
<!--PRODUCT 1-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 1<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 1-->

<!--PRODUCT 2-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 2<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 2-->
</div>

<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 3-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 3<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 3-->

<!--PRODUCT 4-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 4<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 4-->
</div>

<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 5-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 5<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 5-->

<!--PRODUCT 6-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 6<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 6-->
</div>

<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 7-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 7<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 7-->

<!--PRODUCT 8-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 8<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 8-->
</div>

</div>
</div>
<!-- END MODAL -->

<!-- BEGIN SCRIPT -->
<script type="text/javascript">
let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
  modal.style.display = "block"
}
closeBtn.onclick = function(){
  modal.style.display = "none"
}
window.onclick = function(e){
  if(e.target == modal){
    modal.style.display = "none"
  }
}
</script>
<!-- END SCRIPT -->

<!-- BEGIN SCRIPT -->
<script type="text/javascript">
$('.modal').click(function(){
  $('.modal').show();
  $('body').css("overflow", "hidden");
});
</script>
<!-- END SCRIPT -->

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

1. Этот: developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

Ответ №1:

вы можете хранить содержимое в скрытом div. подобный этому:

 <div class="modal-hidden-content-1" style="display:none">CONTENT 1</div>
<div class="modal-hidden-content-2" style="display:none">CONTENT 2</div>
<div class="modal-hidden-content-3" style="display:none">CONTENT 3</div>

ваш модальный div:

 <div class="modal">
<div class="modal-header">
    <span class="close-btn">amp;times;</span>
</div>
<div class="modal-content"></div>
</div>

и пуговицы:

 <button onclick="openModal('1')" class="button"> LEARN MORE 1</button>
<button onclick="openModal('2')" class="button"> LEARN MORE 2</button>
<button onclick="openModal('3')" class="button"> LEARN MORE 3</button>

и тогда javascript должен быть :

 <script>
function openModal(i) {
  $('.modal-content').html($('.modal-hidden-content-' i).html())
  $('.modal').show();
  $('body').css("overflow", "hidden");
}
</script>

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

1. Спасибо тебе, Хакан, за твою помощь, ты действительно помогаешь мне выбраться из затруднительного положения 🙂 Я не настолько силен в коде, поэтому надеюсь, что правильно вас понял. Я не был уверен, куда поместить скрытый код divs в мой код, если бы вы могли дать мне знать, я был бы очень признателен, большое вам спасибо 🙂

2. Привет, Уолтер, ты можешь разместить дивы там, где захочешь. я предлагаю в тегах <тело><тело></тело>

Метки: , ,