bootstrap3 notify なら jquery pnotify の使い方

2014年8月17日更新 view: 151 view
photoBy: http://www.mybookingwizard.com/wp-content/uploads…

notificationって?

ログインしました!入力エラーです!みたいな上にポップしてすぐに消える、あれです。

http://sciactive.com/pnotify/#demos-simple

読み込み

jqueryと pnotify.js pnotify.css を cdn から読み込み

スポンサードリンク
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/pnotify/2.0.0/pnotify.all.min.js"></script>
<link href="//cdn.jsdelivr.net/pnotify/2.0.0/pnotify.all.min.css" rel="stylesheet">

使い方

以下は、右上に 3秒程度 ログインしました! と表示するデモです。
time で close する方法。

<script type="text/javascript">
        $(function(){

            PNotify.prototype.options.delay -= 6000;

            new PNotify({
                title: "成功",
                text: "ログインしました!",
                nonblock: {
                    nonblock: true,
                    nonblock_opacity: .1
                },
                type: 'success'
            })
        });
    </script>
スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

12月4日 ( 水 ) にアクセスが多かった記事はこちら!