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. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  2. jQuery Social Share Bar
  3. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  4. lightgallery.js
  5. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  6. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP