Перейти к содержанию
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>

Безымянный.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, Pipito сказал:

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

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

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

 

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

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.