chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/10/12

[jQuery]1種類じゃない!5種類の表示機能があるモーダルウインドウ jQuery プラグイン「popModal」

モーダルウインドウは基本的に1つの表示方法しかありませんが、今回ご紹介するモーダルウインドウ「popModal」は、5種類の表示方法が実装されております。ライセンスはMITライセンスで対応ブラウザはIE8+(IE8/9は部分的に)/Firefox/Chrome/Safari/です。

5種類の表示方法があるモーダル

モーダルウインドウと言えば、lightbox系を思い浮かべるかと思います。背景がうっすらと黒くなり、コンテンツが上に重なって表示される単一なものかと思います。

今回ご紹介する、「popModal」は5種類のモーダルが実装されております。ライセンスはMITライセンスとなります。

モーダルの種類は、

  • popModal
  • notifyModal(通知モーダル)
  • hintModal(ツールチップ型モーダル)
  • dialogModal(lightbox系モーダル)
  • titleModal(ツールチップ型モーダルその2)

実際の5種類のタイプをキャプチャ致しました。

まずはpopModal

popModal-ar1

次にnotifyModal(通知型モーダル/時間が経過すると消えます)

popModal-ar4

hintModal(マウスオーバーで表示されます)

popModal-ar5

dialogModal(lightbox系です/右を押すと次の要素へ移りました)

popModal-ar6

そして最後にtitleModal(マウスオーバーで表示されます)

popModal-ar7

使い方

htmlは、js,popModal.jsをまず読み込みます。

<!-- Header -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/popModal.js"></script>

<!-- Modal Button -->
<div class="sampleWrapp">
 <button id="popmodal_example1">Example</button>
</div>

<!-- Modal -->
<div style="display:none">
<div id="content">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 <div class="popModal_footer">
  <button type="button" data-popmodal-but="ok">ok</button>
  <button type="button" data-popmodal-but="cancel">cancel</button>
 </div>
</div>
</div>

jQueryは、それぞれの表示毎に記述が異なります。

<script>
$(function(){
 //popModal
 $('#popmodal_example1').click(function(){
  $('#popmodal_example1').popModal({
      html : $('#content'),
      placement : 'bottomLeft',
      showCloseBut : true,
      onDocumentClickClose : true,
      onDocumentClickClosePrevent : '',
      overflowContent : false,
      inline : true,
      beforeLoadingContent : 'Please, waiting...',
      onOkBut : function() {},
      onCancelBut : function() {},
      onLoad : function() {},
      onClose : function() {}
  });
 });

 //popModal(ajax)
 $('#foobar2').click(function(){
  $('#foobar2').popModal({
      html : function(callback) {
          $.ajax({url:'ajax.html'}).done(function(content){
              callback(content);
          });
      }
  });
 });

 //notifyModal
 $('#content').notifyModal({
     duration: 2500,
     placement: 'center',
     overlay: true,
     type: 'notify',
     onClose : function(){ }
 });

 //dialogModal
 $('#content').dialogModal({
     onOkBut: function(){ },
     onCancelBut: function(){ },
     onLoad : function(){ },
     onClose : function(){ }
 });
});
</script>

hintModalとtitleModalはHTML内に記述していきます

<!-- hintModal -->
<span class="hintModal">example
 <div class="hintModal_container"> Lorem Ipsum is simply dummy text of the printing and typesetting industry... </div>
</span>

<!-- titleModal -->
<button title="Title" data-titlemodal="init" data-placement="bottom">Example</button>

 

いかがでしょうか。あまりみないモーダルウインドウのタイプかなと思います。

またIE8は透過pngかrgbaが効いてなく、IE9では微妙に挙動がおかしいものがありました。(hintModalなど・・・)

ツールチップ系は少々相性が悪いのかもしれません。

popModal DEMO

Github

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加