ポップアップ 通知 - さまざまな機能付き「Tikslus Notyrious」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまな機能が付いているポップアップ通知を実装するプラグイン「Tikslus Notyrious」を紹介します。
jQueryプラグイン「Tikslus Notyrious」
このプラグインを使えば、さまざまな機能付きのポップアップ通知を簡単に実装することができます。以下の機能一覧です。
- スクロールしてもついてくる
- アニメーション効果付き
- プログレスバーを表示（一定時間後にポップアップが消える）
- ポップアップにボタンを付加
- ポップアップの位置をいろいろ変える
- 複数のポップアップを一度に表示
……などなど、全部書くのがめんどくさくなるくらいさまざまな機能があります。
スポンサーリンク
デモページの「ここをクリック！クリック！」というところをクリックしてみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Tikslus Notyriousのデモでーす。">
<title>Tikslus Notyrious - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="tikslus_notyrious.min.js"></script>
<script type="text/javascript" src="rainbow.min.js"></script>
<link rel="stylesheet" href="tikslus_notyrious.css"/>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>Tikslus Notyrious のデモでーす。</h1>
<a href='#' id='demo'>ここをクリック！クリック！</a>
<script>
$("#demo").click(function(e){
e.preventDefault();
$.fn.tikslusnotyrious({title:'new message',
message:"ポップアップ！<br />スクロールしてもついてくるよ！<br />しばらく待ってみると…！",
sticky:false,
skinPath:'./'
});
});
</script>
</body>
</html>
スポンサーリンク