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

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

Небольшой урок по добавлению модальных (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;
  }