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

no-image2枚の画像の違いを比較できるjQueryプラグイン「baSlider」前のページ

高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」次のページno-image

関連記事

  1. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  2. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

  3. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  4. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  5. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  6. SweetAlert2

    JavaScript

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

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

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP