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

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

Здравствуйте! Мы уже подключали модальное окно bootstrap. В этом уроке мы рассмотрим подключение универсального модального (Pop-UP) окна для Mobirise, которое будет отлично работать в любой версии нашего любимого Mobirise. Ну что ж, приступим. Также доступен видеоурок.

1. Если у Вас установлен Редактор кода, то переходим в настройки текущей страницы (Страницы>кнопка-шестеренка настроек). Если нет, то ставим бесплатное расширение Google Analytics.
2. Вставляем перед закрывающим </body> скрипт подключения нашего модального окна: Код скрипта

   <script>
   // Получаем попап
   var popup = document.getElementById('mypopup');
   
   // Получаем кнопку, открывающую попап
   var btn = document.getElementById("myBtn");
   
   // Получаем span, закрывающий попап
   var span = document.getElementsByClassName("close")[0];
   
   // Открываем попап по клику
   btn.onclick = function() {
       popup.style.display = "block";
   }
   
   // Закрываем по кнопке
   span.onclick = function() {
       popup.style.display = "none";
   }
   
   // Закрываем попап по клику в любом месте
   window.onclick = function(event) {
       if (event.target == popup) {
           popup.style.display = "none";
       }
   }
   </script>

3. Нажимаем кнопку Редактировать код (если у Вас нет Редактора кода, то редактируем локально через любой html-редактор) у блока, где мы собираемся настраивать кнопку, которая откроет наше модальное окно, и вставляем следующий код до закрывающего </section>: Код в блок

   <style>
   /* Стиль модального окна Mobirise */
   .popup {
       display: none; /* Hidden by default */
       position: fixed; /* Stay in place */
       z-index: 1; /* Sit on top */
       padding-top: 100px; /* Location of the box */
       left: 0;
       top: 0;
       width: 100%; /* Full width */
       height: 100%; /* Full height */
       overflow: auto; /* Enable scroll if needed */
       background-color: rgb(0,0,0); /* Fallback color */
       background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
   
   /* Контент модального окна Mobirise */
   .popup-content {
       position: relative;
       background-color: #fefefe;
       margin: auto;
       padding: 0;
       border: 1px solid #888;
       width: 80%;
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
       -webkit-animation-name: animatetop;
       -webkit-animation-duration: 0.4s;
       animation-name: animatetop;
       animation-duration: 0.4s
   }
   
   /* Включаем анимацию */
   @-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}
   }
   
   /* Кнопка закрыть */
   .close {
       color: white;
       float: right;
       font-size: 28px;
       font-weight: bold;
   }
   
   .close:hover,
   .close:focus {
       color: #000;
       text-decoration: none;
       cursor: pointer;
   }
   
   .popup-header {
       padding: 2px 16px;
       background-color: #5cb85c;
       color: white;
   }
   
   .popup-body {padding: 2px 16px;}
   
   .popup-footer {
       padding: 2px 16px;
       background-color: #5cb85c;
       color: white;
   }
   </style>
   
   <!-- Код попап окна Mobirise-->
   <div id="mypopup" class="popup">
     <!-- Контент попап окна Mobirise -->
     <div class="popup-content">
       <div class="popup-header">
         <span class="close">&times;</span>
         <h2>popup Header</h2>
       </div>
       <div class="popup-body">
         <p>Some text in the popup Body</p>
         <p>Some other text...</p>
       </div>
       <div class="popup-footer">
         <h3>popup Footer</h3>
       </div>
     </div>
   </div>

4. Подключаем кнопку. Кнопка для подключения нашего модального окна должна иметь такой вид - <button id="myBtn" class="btn btn-primary">Открыть попап</button>

Если Вы все сделали правильно, то модальное окно будет выглядеть вот так:

Стиль и содержание модального окна легко редактируется даже без особых навыков в верстке. Дерзайте!