18 jquery модальных окон (popup окон, всплывающих окон)

Редактирование файла script.js

Здесь скрипт, который необходимо просто вставить в файл.


$(document).ready(function() { // зaпускaем скрипт пoсле зaгрузки всех элементoв
/* зaсунем срaзу все элементы в переменные, чтoбы скрипту не прихoдилoсь их кaждый рaз искaть при кликaх */
var overlay = $('#overlay'); // пoдлoжкa, дoлжнa быть oднa нa стрaнице
var open_modal = $('.open_modal'); // все ссылки, кoтoрые будут oткрывaть oкнa
var close = $('.modal_close, #overlay'); // все, чтo зaкрывaет мoдaльнoе oкнo, т.е. крестик и oверлэй-пoдлoжкa
var modal = $('.modal_div'); // все скрытые мoдaльные oкнa

open_modal.click( function(event){ // лoвим клик пo ссылке с клaссoм open_modal
event.preventDefault(); // вырубaем стaндaртнoе пoведение
var div = $(this).attr('href'); // вoзьмем стрoку с селектoрoм у кликнутoй ссылки
overlay.fadeIn(400, //пoкaзывaем oверлэй
function(){ // пoсле oкoнчaния пoкaзывaния oверлэя
$(div) // берем стрoку с селектoрoм и делaем из нее jquery oбъект
.css('display', 'block')
.animate({opacity: 1, top: '50%'}, 200); // плaвнo пoкaзывaем
});
});

close.click( function(){ // лoвим клик пo крестику или oверлэю
modal // все мoдaльные oкнa
.animate({opacity: 0, top: '45%'}, 200, // плaвнo прячем
function(){ // пoсле этoгo
$(this).css('display', 'none');
overlay.fadeOut(400); // прячем пoдлoжку
}
);
});
});

Как работает?

Псевдо селектор изменяет стиль целевого элемента. Комбинирование указание ссылкой на элемент с : и изменением видимости/прозрачности дает в итоге механизм для вывода/скрытия окна. Для улучшения анимации, которая становится дерганной при использовании  , сочетаются :, и

.modal {
opacity: 0;
pointer-events: none;
}

.modal:target {
opacity: 1;
pointer-events: auto;
}

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

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
…
}

Содержание позиционируется посередине и «приглаживается» тенями, скругленными углами и градиентом.

Есть две анимации. Одна называется “bounce” («прыжок» — происходит масштабирование до немного большего размера, затем возвращается все к норме). Другая называется “min­imise”, и она действует в обратном направлении. Для них используется комбинация трансформаций прозрачности контейнера.

Простая трансформация прозрачности:

.modal {
…
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}

Анимация масштабирования, хотя и выполняется в 2D, использует для аппаратного ускорения. Чтобы сделать появление окна более реалистичным тени также анимируются, что создает нагрузку на производительность.

@-webkit-keyframes bounce {
  0% {
        -webkit-transform: scale3d(0.1,0.1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
        -webkit-transform: scale3d(1.08,1.08,1);
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
        -webkit-transform: scale3d(0.95,0.95,1);
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
        -webkit-transform: scale3d(1,1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
        -webkit-transform: scale3d(1,1,1);
  }
  100% {
        -webkit-transform: scale3d(0.1,0.1,1);
  }
}

Для изменения анимации при открытии мы используем каскад и переписываем анимацию по умолчанию с использованием ::

.modal > div {
  …
  -webkit-animation: minimise 500ms linear;
}
.modal:target > div {
  -webkit-animation-name: bounce;
}

Кнопка Закрыть является скрытой ссылкой со стилизованным псевдо-элементом ::, который масштабируется при наведении курсора мыши. Так как мы скрываем оригинальную ссылку, то нужно сделать «прыжок» через изменение состояния псевдо-элемента :. Методы традиционная обрезка, выравнивания текста и скрытия видимости не работают, поэтому используются и несколько специфических стилей для .

.modal a {
…
color: transparent;
}

.modal a:after {
content: 'X';
display: block;
…
}

.modal a:focus:after,
.modal a:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a:focus:after {
outline: 1px solid #000;
}

rmodal.js

Большинство библиотек, которые я рассмотрел, полагаются на jQuery. Но есть некоторые модальные сценарии, которые вы можете использовать, которые полностью свободны от всех зависимостей (вышеупомянутый SweetAlert2 является одним).

предлагает естественный модальный дизайн окон, который может поместиться на любой сайт. Он не полагается на какие-либо JS-библиотеки, и он довольно мал на 1,2 КБ.

Он также может хорошо сочетаться с Bootstrap, если вы думаете объединить это с макетом BS3 / BS4.

Но загляните в чтобы посмотреть, как работает rmodal в браузере. Это не понравится всем, но это хороший выбор для сценария без зависимости.

12 бесплатных библиотек и плагинов модальных окон для вашего сайта, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.

Изменяйте размеры модальных окон

Bootstrap дает вам возможность масштабировать модальные окна. Вы можете создавать малые, большие и очень большие окна, добавив дополнительный класс , или соответственно в элемент с классом. Пример:

<!-- Очень большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Очень большое окно</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Очень большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-xl</code> совместно с <code>.modal-dialog</code> для создания очень большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Большое окно</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-lg</code> совместно с <code>.modal-dialog</code> для создания большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Малое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Малое окно</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Малое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-sm</code> совместно с <code>.modal-dialog</code> для создания малого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.

Редактирование файла style.css.

В файле style.css прописываем стили для нашего модального окна.

.modal_div {
   width: 300px;
   height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
   border-radius: 5px;
   border: 3px #000 solid;
   background: #fff;
   position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
   top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
   left: 50%; /* пoлoвинa экрaнa слевa */
   margin-top: -150px;
   margin-left: -150px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
   display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
   opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
   z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
   padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
   width: 21px;
   height: 21px;
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   display: block;
}
/* Пoдлoжкa */
#overlay {
   z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
   position:fixed; /* всегдa перекрывaет весь сaйт */
   background-color:#000; /* чернaя */
   opacity:0.8; /* нo немнoгo прoзрaчнa */
   -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
   filter:alpha(opacity=80);
   width:100%;
   height:100%; /* рaзмерoм вo весь экрaн */
   top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
   left:0;
   cursor:pointer;
   display:none; /* в oбычнoм сoстoянии её нет) */
}

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу нужно добавить CSS-свойство со значением . А после скрытия модального окна данное свойство убрать у элемента . Данное действие можно осуществить только с помощью JavaScript:

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

Как создать и вызвать модальное окно?

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице. Это выполняется программно.

Таким образом, для того чтобы создать его достаточно просто вызвать функцию :

var modal = $modal();

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ позволяет установить содержимое, а – кнопки для отображения их в его нижней части (футере).

var modal = $modal({
  title: 'Текст заголовка',
  content: '<p>Содержимое модального окна...</p>',
  footerButtons: 
});

Все эти ключи являются не обязательными. Если не указать , то заголовок будет иметь название «Новое окно». Если не установить значению ключу , то модальное окно в этом случае создатся с пустым содержимым.

Ключ в отличие от и принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку. Она задаётся с помощью ключей , , . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов и . Если ключ вообще не указать, то в этом случае модальное окно будет создано без футера.

Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

var modal = $modal({
  title: 'Текст заголовка'
});  

Пример создания модального окна с настройками по умолчанию:

var modal = $modal();

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

Для этого нужно создать переменную и присвоить ей результат выполнения функции .

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

  • – для отображения модального окна;
  • – для скрытия модального окна;
  • – для удаления модального окна из DOM и связанных с ним обработчиков событий;
  • – для установки контента;
  • – для установки заголовка.

Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

Рассмотрим, как работать с этими методами на примерах.

Например, метод используется когда вам необходимо показать (открыть) модальное окно:

modal.show();

Метод применяется для его скрытия:

modal.hide();

Методы и предназначены соответственно для изменения контента и заголовка модального окна после его создания.

modal.setContent('<p>Новое содержимое...</p>');
modal.setTitle('Текст нового заголовка');

В возвращаемом объекте также есть метод . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

modal.destroy();

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

Расширение функционала

Сейчас в моём модальном окне 149 строк кода если считать с пробелами. Но в конечном счёте, в моём проекте оно выросло до 367 строк и я рад этому. В начале моего проекта мне нужно было просто модальное окно. Но потом мне понадобилось загружать в него форму с contact form 7 по ajax, так же и отправлять данные, валидировать форму, переводить форму на 2 языка, проверять куки. И с XMC (название моего модального окна) это очень просто, потому что ты не ищешь элементы, ты не назначаешь множество переменных у тебя всё храниться внутри объекта и ты имеешь доступ к его данным. Вот например как я сделал ajax-запрос формы:

XMC.prototype.ajax = function () {
    var mf = this;
    var data = new Object();
    data = JSON.stringify(data);
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            mf.body.innerHTML = this.responseText;
            mf.form = mf.body.firstChild;
            mf.form = mf.form.querySelector('form');
            mf.form.setAttribute('action', '#wpcf7-f41-o1');

            var el = document.createElement('div');
            el.id = 'wpcf7-f41-o1';
            mf.body.appendChild(el);
			
			if(window.screen.width < '758'){
				var submit = mf.form.querySelector('input');
				mf.btnClose.classList.add('btn');
				mf.btnClose.setAttribute('type', 'button');
				mf.btnClose.classList.add('btn-warning');
				mf.btnClose.classList.add('rounded-circle');			
				submit.insertAdjacentElement('afterend', mf.btnClose);
			}
            mf.sendClickDelegate(mf.form);
            mf.i18n();
        }
    };
    xhttp.open('POST', localizationPreloader.adminUrl + "?action=fgb_modal_one_form", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("data="+data);
    return this;
};

this.body — это основной блок «модалки», в которую по ajax подгружаю форму. А сам ajax я вызываю initBackground() в условии если задний слой равен null. Этим я достигаю того, что ajax формы делается один раз, а не каждый раз как происходит нажатие. 

Поддержи Xakplant


Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.

Разметка HTML

Структура разметки достаточно проста. Имеется одна панель с кнопками и два всплывающих элемента. Каждый содержит перекрывающий слой в элементе и некоторое содержание с кнопкой для закрытия окна.

<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

        <!-- Панель с кнопками -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Войти</a>
                <a href="#join_form" id="join_pop">Регистрация</a>
            </div>

        </div>

        <!-- Форма №1 для модального окна -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Здравствуй, Гость!</h2>
            <p>Вводи свой псевдоним и пароль</p>
            <div>
                <label for="login">Псевдоним</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Пароль</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Войти" />

            <a class="close" href="#close"></a>
        </div>

        <!-- Форма №2 для модального окна -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Регистрация</h2>
            <p>Нужно о себе кое-что рассказать</p>
            <div>
                <label for="email">Псевдоним (email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Пароль</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">Имя</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Фамилия</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Регистрация" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>

            <a class="close" href="#close"></a>
        </div>
    </body>
</html>

Вызов модального окна с разных кнопок

Вообще подобная задача — это типичный пример делегирование события. И вот мой пример:

var XMC = function (object){
   // Конструктор 
   this.delegateClick();
}
XMC.prototype.delegateClick = function () {
    // Это нужно потому что в событие this другое значение
    var mf = this;
    // Вешаю событие на window
    window.addEventListener('click', function (event) {
            // Проверяю есть ли у элемента нужный атрибут и правильное ли у него значение
           if(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue ){
               // Открываю окно
               mf.show();
           }
    }, mf, false);
    return this;
};

Думаю, что часть читателей этой статьи закроют её, так как уже поняли то, что им нужно. А для ленивых, которые не хотят возиться с кодом я выложил ссылку на github с примером и сейчас расскажу как этим пользоваться.

Закрываем окно

Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.

Установка и инициализация

Ни чего особенного делать не нужно, копируете код с моего github и вставляете из файла xmcmodal.js и подключаем его как обычный скрип. Приступим к инициализации. В файле на который я дал вам ссылку уже есть пример. Я расскажу что к чему. Смотрите код и комментарии

new XMC({
    // ID для блока в котором будет контент модального окна
    bodyID: 'tModlaContentBox',
    // ID заднего слоя
    backgroundLayerID: 'tModalContentWraper',
    // Селектор который будет у всех элементов, которые будут вызывать окно
    selector: 'data-type',
    // Значение селектора
    selectorValue: 'openModalForm',
    // ID для кнопки закрыть
    btnId: 'fbgmfClose',
    // html во всплывающем окне или текст
    content: 'wait...',
    // Классы для заднего слоя
    classListBg: ,
    // Классы для основного блока
    classListBody: ,
    // Классы для кнопки закрыть
    classListBtn: ,
    // Стили для заднего слоя
    styleBg: {
        top: '0',
        left:'0',
        right: '0',
        bottom: '0',
        position: 'fixed',
        background: '#00000090',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: '11000'
    },
    // Стили для блока с контентом
    styleBody: {
        minWidth: '200px',
        minHeight: '200px',
        background: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    // Стили кнопки закрыть
    btnStyle: {
        width: '40px',
        height: "40px",
        background: '#ffffff',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: '5%',
        right: '5%',
        cursor: 'pointer',
        zIndex: '7'
    }
});

Конструктор получился очень гибким в нём можно указать всё что нужно, а потом динамически менять.

More advanced AJAX handling

Simply bypass the default AJAX handling (i.e.: don’t use )

<ahref="ajax.html"rel="ajax:modal">Click me!</a>

and make your AJAX request in the link’s click handler. Note that you need to manually append the new HTML/modal in the callback:

$('a').click(function(event){$.ajax({    url$(this).attr('href'),successfunction(newHTML,textStatus,jqXHR){$(newHTML).appendTo('body').modal();},errorfunction(jqXHR,textStatus,errorThrown){}});returnfalse;});

Note that the AJAX response must be wrapped in a div with class when using the second (manual) method.

Have an idea that improves jquery-modal? Awesome! Please fork this repository, implement your idea (including documentation, if necessary), and submit a pull request.

I don’t use this library as frequently as I used to, so if you want to see a fix/improvement you’re best off submitting a pull request. Bugs without a test case and/or improvements without a pull request will be shown no mercy and closed!


С этим читают