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. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  3. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  6. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP