Создание модальных или всплывающих окон с помощью Reveal

Введение

Вы можете создавать модальные или всплывающие окна, используя Reveal — плагин JQuery от Zurb Foundation 3. В этом руководстве мы увидим, как использовать Reveal.

Как его использовать

Включение файлов

Для работы Reveal необходимо включить два файла. Это два файла: foundation.js (или его уменьшенная версия) и foundation.css.

HTML

А затем вы можете установить требуемый HTML. Вот пример того, как вы можете это сделать:

  
 
 Вы читаете руководства w3resource. 
 
 Мы предлагаем учебные пособия по веб-разработке. 
 
 У нас есть более 2000 руководств по различным темам, связанным с веб-разработкой. 
  ×   

Вы должны добавить разметку для Reveal в конце страницы, после того как вы закончите все свои строки и столбцы. Теперь вы добавляете ссылку/кнопку, чтобы пользователь мог щелкнуть ее, чтобы открыть модальное окно. Примерно так:

  
  Пример модального окна…    

Обратите внимание, что значение атрибута ‘data-detect-id’ такое же, как и значение атрибута id модального элемента div. Вот полный пример кода:

Код:

         
 
 
 Эта страница содержит модальный диалог. 
 
  Пример модального окна…  
 
 
 
 
 Вы читаете руководства по w3resource  . 
 
 Мы предлагаем учебные пособия по веб-разработке. 
 
 У нас есть более 2000 руководств по различным темам, связанным с веб-разработкой. 
  ×  
          

Просмотреть онлайн-демонстрацию.

Показать с помощью JavaScript

Вы можете использовать JavaScript для достижения того же. В этом случае добавьте следующий код JavaScript в конце своей страницы:

   $ (document) .ready (function () {  $ ('# buttonForModal'). click (function () {$ ('# myModal'). Show ();});});   

Параметры

Есть несколько вариантов, позволяющих расширить функциональные возможности Reveal. Если вы используете JavaScript, вы можете использовать его следующим образом:

  $ ('# myModal'). Show ({animation: 'fadeAndPop',//fade, fadeAndPop,  none animationspeed: 300,//насколько быстрые анимации closeOnBackgroundClick: true,//если вы щелкнете, фон закроется в модальном окне? dismissModalClass: 'close-detect-modal'//класс кнопки или элемента, который закроет открытый модальный экран}  );