jQuery

【jQuery】トップからスライドするスライディングモーダルSlideup Modal

October 15, 2018
Slide Up CSS Modals

Slideup Modalはトップからスライドするスライディングモーダルプラグイン。

Dependencies

Chrome, Firefox 3+, Safari 3+, Opera 10+, Internet Explorer 7+ ( 6+ except for fixed positioning )

Usage

slideup.cssslideup.jquery.jsをインクルードします。

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/slideup.css">
  </head>
  <body>
  <script src="js/libs/slideup.jquery.js"></script>
  </body>
  </html>

モーダルを作成し、slideup-modalクラスに与え、一意のID(必須)を追加

  <div id="someId" class="slideup-modal">
  	<h2>Loremipsum</h2>
  	<p>lorem-ipsum</p>
  </div>

トリガーを作成。data-reveal-id属性を与え、モーダルのIDと一致させます。

<a href="#" data-reveal-id="someId" >Launch the Modal</a>

MIT