ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方
1行目のaタグは、モーダルウィンドウを開くためのリンクです。href要素にモーダルウィンドウで表示させる要素を囲ったidを指定します。ここでは#content01です。 また、aタグにはJSで識別するためのidを付与しておきます。デフォルトでは#animatedModalですが、ここでは#demo01としています。idを変更した場合はjQueryのオプションにその旨記述する必要がありますので、事項のコード3行目を参考にしてください。 3行目は閉じるボタンです。このクラス名は「close-」に続けてモーダルウィンドウで表示する要素のid名を指定します。ここでは.close-content01です。
jQuery demo12行目でaタグに指定したidに対して実行するようにしています。 3行目に、モーダルウィンドウで表示する要素を囲ったidを指定します。 アニメーションの種類はAnimate.cssのサイトにサンプルがあります。 プルダウンに表示されている名前をそのまま指定すればOKです。
$(function() < $('#demo01').animatedModal(< modalTarget:'content01', animatedIn:'bounceInUp', //表示する時のアニメーション animatedOut:'bounceOutDown', //閉じる時のアニメーション animationDuration:'1s', //アニメーションにかける秒数 color:'#15b7ff', //背景色 >); >); jQuery demo2 $(function() < $('#demo02').animatedModal(< modalTarget:'content02', animatedIn:'fadeInDown', animatedOut:'fadeOutUp', animationDuration:'1s', color:'#fff', >); //背景色を半透明に $('#content02').css('backgroundColor','rgba(255,255,255,0.8)'); >);SEARCH
FEED
RELATED POSTS
- フルスクリーン表示するjQueryのレスポンシブメニュー
- jQueryでボタンをクリックしたら、隠された部分をスライド表示する方法
- テキストにエフェクトがつけられるプラグインまとめ
- iziModalでjQueryのモーダルウィンドウを実装する
- inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き
- iziModalでjQueryのモーダルウィンドウを実装する
- Magnific PopupでjQueryのモーダルウィンドウを実装する方法
- ColorboxでjQueryのモーダルウィンドウを実装する方法
POPULAR POSTS
- CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識
- ColorboxでjQueryのモーダルウィンドウを実装する方法
- Magnific PopupでjQueryのモーダルウィンドウを実装する方法
- 【CSS】background-sizeで背景画像をレスポンシブに設定する方法
- JavaScriptで一定時間たったらページ遷移させる方法
- 【jQuery】slickのカルーセルスライダー実装方法とサンプル集
- iziModalでjQueryのモーダルウィンドウを実装する
- jQueryスライダー Slider Pro の使い方
- jQueryでページ読み込み中にローディング画面を表示する方法
- Google Chromeの便利な検索オプション
ⓒGimmick log All Rights Reserved.