Bootstrap Mobile FullScreen Modal

JavaScript

スマホからのモーダルウィンドウを使いやすくしてくれる「Bootstrap Mobile FullScreen Modal」

Bootstrap Mobile FullScreen Modalは、スマホからのモーダルウィンドウを使いやすくしてくれるjQueryプラグインです。Bootstrapのモーダルウィンドウを改善して、より操作しやすく実装できます。

操作ボタンを上部に表示させる

デモ

パソコンからではなくスマホから閲覧すると、どのように変わっているかがわかると思います。

デモページには、Large Demo Modal、Small Demo Modal、Text Buttons、Font Awesome Buttonsと全部で4種類のサンプルが設置されています。

通常のBootstrapのモーダルウィンドウでは、下に操作するボタンが表示されていますが、Bootstrap Mobile FullScreen Modalを使うことでモーダルウィンドウの上に操作ボタンが表示されます。

大量のテキストなどが書かれている場合、通常のものだとわざわざ下までスクロールしなければいけませんが、操作ボタンが常に上部に表示されていることで、いつでも各操作にアクセスできるのが便利ですね。

また、ボタンの種類に関してもテキストを使ったものやFont Awessomeを使ったものなどがあるので、細部までカスタマイズして使いたい人にもピッタリですね。

モーダルウィンドウ自体のデザインもシンプルに作られているので、いろんなサイトに合わせやすいと思います。

依存するライブラリは、Twitter BootstrapとjQueryです。ライセンスはMITとのこと。

というわけで、シンプルで操作性に優れたモバイルに最適なモーダルウィンドウを実装したい人は、ぜひ「Bootstrap Mobile FullScreen Modal」を活用してみてはいかがですか?

Bootstrap Mobile FullScreen Modal

関連記事

  1. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. no-image
  4. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  5. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  6. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP