jquery-areapopup.js
html内の任意の要素内にポップアップを表示させるためのjs。
ざっくりいうと、lightboxみたいなことを、ウィンドウ全体ではなく、あるエリア内だけでやる場合に使うjs。
This library, willing to help in order to display the pop-up in the element. Like "lightbox".
Browser compatibility
IE8+ Chrome, Firefox, Safari. (current versions)
Release log
v0.1 - Jul 14,2014
First release
Usage
- This library is jQuery plugin. You need to get jQuery(v1.9) source.
- Popup style(CSS) is not setting. You need to style popup window. Refer to the file
sample/index.html, and ".ap_popup" style.
- Write link element
jquery.areapopup.js. - Write script element jQuery(v1.9), and
jquery.areapopup.js. - Write the executable code.
$(triggerSelector).areapopup()
$(".trigger").areapopup({ isAnimate : true, // default true duration : 300, // default 300 easing : 'swing', // default 'swing', close : '.ap_close' // default '.ap_close' }); Example
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <head> <link rel="stylesheet" type="text/css" href="./css/jquery.areapopup.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.areapopup.js"></script> </head> <body> <div class="ap_parent"> <a href="#ap_popup1" class="ap_btn">item1</a> <a href="#ap_popup2" class="ap_btn">item2</a> <div id="ap_popup1" class="ap_popup"> <p>Hi! Area popup!</p> <p><a href="javascript:void(0)" class="ap_close">close</a></p> </div> <div id="ap_popup2" class="ap_popup"> <p>ap_popup2 show!</p> <p><a href="javascript:void(0)" class="ap_close">close</a></p> </div> <!-- /.ap_parent --></div> <script> $(function(){ $(".ap_btn").areapopup(); }); </script> </body> </html> License
The MIT License (MIT)
