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

Последнее обновление 28 мая 2019 12:30:07 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

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

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

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

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

HTML

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

<div id="exampleModal" class="reveal-modal">
  <h2>You are reading w3resource tutorials.</h2>
  <p class="lead">We offer web development tutorials.</p>
  <p>We have more than 2000 tutorials on various topics related to web development.</p>
  <a class="close-reveal-modal">×</a>
</div>

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

<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal…</a></p>

Обратите внимание, что значение атрибута «data -картильный-id» совпадает со значением атрибута «id» в div, содержащем модал. Вот полный пример кода:

Код:

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <title>Reveal Example, created with Foundation 3</title>
  <link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
  </head>
<body>
<div class="row">
  <div class="six columns">
	<h3>This page contains modal dialog.</h3>
	<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal…</a></p>
  </div>
</div>
<div id="exampleModal" class="reveal-modal">
  <h2>You are reading w3resource tutorials.</h2>
  <p class="lead">We offer web development tutorials.</p>
  <p>We have more than 2000 tutorials on various topics related to web development.</p>
  <a class="close-reveal-modal">×</a>
</div>
<script src="../zurb-foundation3/foundation3/javascripts/jquery.min.js"></script>
<script src="../zurb-foundation3/foundation3/javascripts/app.js"></script>
<script src="../zurb-foundation3/foundation3/javascripts/jquery.reveal.js"></script>
</body>
</html>

Посмотреть онлайн демо .

Выявить с помощью JavaScript

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


<script type="text/javascript">
  $(document).ready(function() {
    $('#buttonForModal').click(function() {
      $('#myModal').reveal();
    });
  });
</script>

Опции

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

$('#myModal').reveal({
     animation: 'fadeAndPop', //fade, fadeAndPop, none
     animationspeed: 300, //how fast animations are
     closeOnBackgroundClick: true, //if you click background will modal close?
     dismissModalClass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});

Предыдущий: Создание адаптивного изображения и слайдера контента с орбитой