動きのあるホームページブログ!!

  • TOP
  • ブログ
  • ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグインのご紹介!!
s-MBPR_9V9A8323_TP_V

動くホームページブログ!!

ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグインのご紹介!!

今回ご紹介するPoplayerはドラッグ&ドロップ機能をサポートするモーダルポップアップを表示するためのJQueryプラグインです。

使い方は以下の内容をご参考ください。

実装方法

JQueryプラグインのCSSファイルをドキュメントのheadセクションにロードします。

<link href="pop.css" rel="stylesheet">

JQueryライブラリの後にjQueryのポップアッププラグインのスクリプトを閉じてbodyタグの前にロードします。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="pop.js"></script>

Webページ上にモーダルポップアップを作成します。

<script>
            $(function() {
                var i = 1;
                $(document).delegate('.pop', 'click', function(event) {
                    new top.PopLayer({ 
                        "title": "Modal Title" + (i++), 
                        "content": "<button class='pop'>New Popup</button>"
                    });
                });
            });
        </script>

body内にボタンを設置

<button class='pop'>New Popup</button>

 

こちらからデモを確認することができます。

Gitからファイルをダウンロードするにはこちら

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!

    JQueryの登場で最近よく見受けられる背景動画を用いたWEBサイト。…

  2. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

  3. 20160630_1

    動くホームページブログ!!

    WordPress上で本をめくるような電子カタログプラグインのご紹介!!

    WordPress(ワードプレス)上でつくる「本をめくるような電子カタ…

  4. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  5. 20160707blog

    動くホームページブログ!!

    ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介!!

    ニコ動やニコ生でよく見られる流れるようなコメントができるNicoScr…

  6. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 8b5c6a43c12ceeea8b4844a8fe15efc8_s

    SEO対策

    SEO対策を行う上で知って得する検索順位が決まる仕組みについて!!
  2. 15d0dcde2feb2af4fea63f3ee6660a2f_s

    制作ツールブログ!!

    ホームページの運用に役立つ無料の編集ソフト!!
  3. 20c2d9831cf298a5195f78bbcf00f8e4_m[1]

    制作ツールブログ!!

    ネームサーバー移行前の新サーバーの動作確認
  4. 20160801blog

    制作ツールブログ!!

    簡単にできる多言語サイトの作り方!
  5. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!