скопировать код модального окна

[Pipito]

Приветствую, коллеги! Уповаю на Ваш опыт и профессионализм. 

Шаблон http://rentwell.ru/ - внизу главной страницы есть модуль с всплывающими окнами(см.на скрине) и там вот такой код(см.ниже)

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

 

 

<div class="row hidden-xs" style="border-top: 1px solid #EAEAEA;   padding: 15px 0px;   border-bottom: 1px solid #EAEAEA;   ">   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo1.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 35px;      float: left;      "><a class="demo" href="#" data-toggle="modal" data-target="#modal1" style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Скидочная программа для постоянных клиентов</a></div>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p><button class="close" type="button" data-dismiss="modal">x</button></p>
<h4 class="modal-title">Название модального окна</h4>
</div>
<div class="modal-body"><h3>Содержимое модального окна</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
</div>
</div>
</div>
   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo2.png" alt="English" title="English" style="      display: block;      width: 37px;      height: 45px;      float: left;      "><span style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Скидочная программа для постоянных клиентов</span></div>
   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo3.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 31px;      float: left;      "><span style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Скидочная программа для постоянных клиентов</span></div>
   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo4.png" alt="English" title="English" style="      display: block;      width: 36px;      height: 44px;      float: left;      "><span style="      margin-left: 56px;      display: block;">Скидочная программа для постоянных клиентов</span></div>
</div>

[Gann]

Только что, Pipito сказал:

Приветствую, коллеги! Уповаю на Ваш опыт и профессионализм. 

Шаблон http://rentwell.ru/ - внизу главной страницы есть модуль с всплывающими окнами(см.на скрине) и там вот такой код(см.ниже)

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

 

Приветствую тебя, начинающий коллега!+

 

id="modal1", id="modal2", id="modal3" и ещё вот сюда посмотри: <a class="demo" href="#" data-toggle="modal" data-target="#modal1"

 

[Pipito]

10 минут назад, Gann сказал:

 

Приветствую тебя, начинающий коллега!+

 

id="modal1", id="modal2", id="modal3" и ещё вот сюда посмотри: <a class="demo" href="#" data-toggle="modal" data-target="#modal1"

 

 

Вот так?) Я традиционно скопировал и поменял как Вы сказали d="modal1" на d="modal2", d="modal3" и d="modal4", но не работает, точнее, одну получилось скопировать, но как то не ровно)

 

<div class="row hidden-xs" style="border-top: 1px solid #EAEAEA;   padding: 15px 0px;   border-bottom: 1px solid #EAEAEA;   ">   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo1.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 35px;      float: left;      "><a class="demo" href="#" data-toggle="modal" data-target="#modal1" style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Бесплатная доставка по всей России при заказе от 3990 р</a></div>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p><button class="close" type="button" data-dismiss="modal">x</button></p>
<h4 class="modal-title">Бесплатная доставка</h4>
</div>
<div class="modal-body"><h3>При заказе на сумму более 3990 рублей мы доставим Ваш заказ бесплатно в любой регион России. А для покупателей из Екатеринбурга, Москвы и Санкт-Петербурга - при заказе от 3000 р</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
<div class="row hidden-xs" style="border-top: 1px solid #EAEAEA;   padding: 15px 0px;   border-bottom: 1px solid #EAEAEA;   ">   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo1.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 35px;      float: left;      "><a class="demo" href="#" data-toggle="modal" data-target="#modal2" style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Бесплатная доставка по всей России при заказе от 3990 р</a></div>
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p><button class="close" type="button" data-dismiss="modal">x</button></p>
<h4 class="modal-title">Бесплатная доставка</h4>
</div>
<div class="modal-body"><h3>При заказе на сумму более 3990 рублей мы доставим Ваш заказ бесплатно в любой регион России. А для покупателей из Екатеринбурга, Москвы и Санкт-Петербурга - при заказе от 3000 р</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
<div class="row hidden-xs" style="border-top: 1px solid #EAEAEA;   padding: 15px 0px;   border-bottom: 1px solid #EAEAEA;   ">   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo1.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 35px;      float: left;      "><a class="demo" href="#" data-toggle="modal" data-target="#modal3" style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Бесплатная доставка по всей России при заказе от 3990 р</a></div>
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p><button class="close" type="button" data-dismiss="modal">x</button></p>
<h4 class="modal-title">Бесплатная доставка</h4>
</div>
<div class="modal-body"><h3>При заказе на сумму более 3990 рублей мы доставим Ваш заказ бесплатно в любой регион России. А для покупателей из Екатеринбурга, Москвы и Санкт-Петербурга - при заказе от 3000 р</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
<div class="row hidden-xs" style="border-top: 1px solid #EAEAEA;   padding: 15px 0px;   border-bottom: 1px solid #EAEAEA;   ">   <div class="col-sm-3"><img src="/catalog/view/theme/magazin/image/promo1.png" alt="English" title="English" style="      display: block;      width: 43px;      height: 35px;      float: left;      "><a class="demo" href="#" data-toggle="modal" data-target="#modal4" style="      margin-left: 56px;      display: block;      border-right: 1px solid #EAEAEA;      ">Бесплатная доставка по всей России при заказе от 3990 р</a></div>
<div class="modal fade" id="modal4" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p><button class="close" type="button" data-dismiss="modal">x</button></p>
<h4 class="modal-title">Бесплатная доставка</h4>
</div>
<div class="modal-body"><h3>При заказе на сумму более 3990 рублей мы доставим Ваш заказ бесплатно в любой регион России. А для покупателей из Екатеринбурга, Москвы и Санкт-Петербурга - при заказе от 3000 р</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
</div>