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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  3. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  4. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  5. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  6. jQuery Text Fade Delay

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP