modal.js — модальный компонент

Основан на компоненте avalon, совместим с браузерами Chrome, Firefox, IE7, IE9, IE10 и IE11.

Описание функций:

modal.js – это модальный всплывающий компонент, основанный на avalon. Его особенность в том, что он появляется в месте нажатия кнопки запуска. Анимация основана на CSS3.

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

Использование:

1. Сначала добавьте в проект файлы modal.js и modal.css.
2. В структуре страницы напишите следующее:

<!--modal 模态框-->
    <div ms-controller="modal">
        <div class="modal-bg" id="myModal" ms-visible="toggle" ms-click="getOut">
            <div class="modal-box"
                 ms-css-left="x"
                 ms-css-top="y"
                 ms-css-height="mh"
                 ms-css-width="mw">
                <!--modal 模态框内容映入点-->
                <div ms-include-src="url"></div>
            </div>
        </div>
    </div>

3. В другом месте создайте содержимое модального окна в виде HTML-файла, например, "./plugins/modal.html".
4. Запустите: сначала добавьте содержимое модального окна (modal.html), затем запустите метод modal.getIn("ширина модального окна"). Код выглядит следующим образом:

modal.url="./plugins/modal.html";
modal.getIn(800);

5. Закройте: вызовите метод getOut(). Код выглядит следующим образом:

modal.getOut();

6. Готово!

The MIT License (MIT)

Copyright (c) 2015 mooshroom