Добавление модального (POP-UP) окна на Mobirise-сайт


Опубликовано 28.07.2017


Содержание статьи

Небольшой урок по добавлению модальных (Pop-Up) окон на Ваши сайты, созданные в Mobirise на русском. Видео на нашем канале YouTube. Работает на всех версиях Mobirise 3 и 4, кроме Mobirise 4 темы.

Тема из обзора DirectM входит в наш пакет Mobirise Kit. Также Вы можете приобрести ее отдельно прямо через интерфейс программы Mobirise, загруженной с главной страницы сайта.

  • Атрибуты для кнопки, по которой будет открываться модальное окно - href="#donateModal" data-toggle="modal"
  • Код для вставки в блок:
    <div class="donate-modal modal fade" id="donateModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-content popupwind">
                <div class="container popupcontainer">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <h2>Что такое Mobirise?</h2>
                                <p class="item-intro text-muted">Mobirise - это приложение для Windows и Mac, при помощи которого можно легко создавать веб-сайты, лендинги, онлайн-резюме, портфолио или промо-сайты для приложений, событий, продуктов и услуг. Фантазируйте!
    							<img src="https://mobiriz.store/tmpl/vendor/images/unique.jpg"><br>
    							</p>
                                <button type="button" class="btn mbr-editable-button btn-success" data-dismiss="modal"> Закрыть </button><br> 
                           </div>
                        </div>
                    </div>
                </div>
          </div> 
    </div>
  • Дополнительный код CSS для блока:
    .col-adj-20{width:20%;}
    .donate-modal .modal-content {
      border-radius: 0px;
      background-clip: border-box;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: none;
      height:auto;
      padding: 40px;
      text-align: center;
    }
    .donate-modal .modal-content h2 {
      margin-bottom: 15px;
      font-size: 1em;
    }
    .donate-modal .modal-content p {
      margin-bottom: 30px;
    }
    .donate-modal .modal-content p.item-intro {
      margin: 20px 0 30px;
      font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-style: italic;
      font-size: 16px;
    }
    .donate-modal .modal-content ul.list-inline {
      margin-bottom: 30px;
      margin-top: 0;
    }
    .donate-modal .modal-content img {
      margin-bottom: 30px;
    }
    .donate-modal .close-modal {
      position: absolute;
      width: 75px;
      height: 75px;
      background-color: transparent;
      top: 25px;
      right: 25px;
      cursor: pointer;
    }
    .donate-modal .close-modal:hover {
      opacity: 0.3;
    }
    .donate-modal .modal-backdrop {
      opacity: 0;
      display: none;
      width:80%;
    }
    .popupwind{
    top:80px;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    }
    .popupcontainer{
    max-width:950px;
    margin-left:auto;
    margin-right:auto;
    }
    

Свежие материалы

Статья

Шрифты в программе Mobirise

Использование нужных шрифтов в Mobirise

Видеоурок

Как работать с Редактором кода в Mobirise?

Обзор работы с расширением Mobirise code editor на русском.

Статья

Универсальное модальное (POP-UP) окно в Mobirise

Mobirise универсальное модальное попап окно на русском

Статья

AmoCRM Mobirise - простая интеграция Mobirise с CRM

Простой вариант подключения Mobirise к CRM