ポップアップを簡単に実装

se_ka05
se_ka05

ポップアップを簡単に実装することが出来るプラグイン「PopUpMe」を紹介します。

このプラグインを使えば【タイトル】と【テキスト】を入力するだけで簡単にポップアップを実装することが出来ます。

また、【テキスト】の個所にHTMLのコードも利用することが出来ます。

・下記が使用するCSSおよびJSファイルです。

  1. <head>
  2. 　<link rel="stylesheet" href="common/css/popupme.css"></script>
  3. 　<script type="text/javascript" src="common/js/jquery-2.1.1.min.js"></script>
  4. 　<script type="text/javascript" src="common/js/popupme.js"></script>
  5. </head>

・ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="PopUpMeデモ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>PopUpMe - jQuery Plugin Demo</title>
  8. <link rel="stylesheet" type="text/css" href="common/css/popupme.css">
  9. <style>
  10. table td {
  11. border: solid 1px red;
  12. }
  13. </style>
  14. <script src="common/js/jquery-2.1.1.min.js"></script>
  15. <script src="common/js/popupme.js"></script>
  16. <script>
  17. $(document).ready(function(){
  18. $("#demo").popupme({title:'PopUpMeのタイトルです',text:'ここにテキストを入力してください。HTMLコードも使えます。<table><tr><td>テーブル</td><td>デモ</td></tr><tr><td>テーブル</td><td>デモ</td></tr></table>',animation:'zoom-in'});
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <p class="panel"><a href="" id="demo">ポップアップです。</a></p>
  24. </body>
  25. </html>

上記ソースのポップアップ時アニメーションはズームインですが、他にもズームアウトや左・右から表示などいろいろありますので下記よりダウンロードして試してみてください。
GitHub

関連記事