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. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  4. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  5. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  6. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP