dndod

JavaScript

依存性のないシンプルで簡単なモーダルライブラリ「dndod」

dndodはjQueryなどへの依存性のないシンプルで簡単なJavaScriptモーダルライブラリです。サクサクした動作でストレスなく快適に操作できます。オプションもいろいろ揃っているのでカスタマイズしたい人にも最適です。

dndod

デモ

デモページにはアラートの表示やコールバックを使ったもの、アニメーションがないタイプなど、いろんなサンプルが用意されています。

各場所に表示されている「Show demo」をクリックすることで、そのタイプのデモ動作をチェックできます。

例えば、一番上にある「dndod.alert(msg, options)」を見てみると、上からモーダルウィンドウが降りてくるデモを確認できます。モーダルウィンドウが表示されている間は背景にうっすらオーバーレイがかかっています。

真ん中の「OK」か右上のバツ印、もしくはモーダルウィンドウ外をクリックかESCキーを押すと上の方へ飛んでいき元の状態に戻ります。

アニメーション動作も素早く、サクサクと進めていけるのでとてもテンポの良いモーダルウィンドウです。

他にもたくさんのデモが用意されているので、気になる人はぜひチェックしてみてください。

オプションには、prefixClass、title、msg、textAlign、animation、animationDuration、disableCloseBtn、disableOutline、enableHTML、events、buttonsといった項目が用意されています。

依存性もなくシンプルで簡単なうえにオプションによるカスタマイズもできる、便利なモーダルウィンドウを実装したい人は、ぜひ「dndod」を使われてみてはいかがでしょうか?

サポートされているブラウザは、Chrome、Safari、Firefox、IE 10+、Edge、Operaです。また、ライセンスはMITとのこと。

dndod

関連記事

  1. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  2. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  3. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

  4. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  5. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP