Tingle.js, 2kB vanilla modal plugin
Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit your needs. <link rel="stylesheet" href="tingle.min.css"> Then, just include tingle in your document: <script src="tingle.min.js"></script> Use // instanciate new modal var modal = new tingle.modal({ footer: true, stickyFooter: false, closeMethods: ['overlay', 'button', 'escape'],
iPhoneに最適化したモーダルウィンドウを表示するjQueryプラグイン | かえラボBlog
スマートフォン対応サイトではよく見られるのが、Ajaxによるコンテンツの切り替えです。ページ遷移によるユーザーのストレスを軽減を図る手法として利用されているものと思われます。この手法でたまに見られるのがモーダルウィンドウ（通称Lightbox。モーダルボックスとも呼ばれる）です。 今回はスマートフォン（主にiPhone Safari）に最適化したモーダルウィンドウを表示するjQueryプラグインを作りました。デモや使い方など、詳しくは以下の解説ページにて。 "smartModalWindow" jQuery plugin - 解説ページ スマートフォン端末ではiPhone 3GS Safari、iPhone 4 Safariで動作確認しています。PCのブラウザでも動作しますが、WebKit系以外はアニメーションしません。
"smartModalWindow" jQuery plugin - 解説ページ
Description このスクリプトはjQueryプラグインです。 指定した要素からのリンクされているドキュメントを、モーダルウィンドウ（通称Lightbox）で表示します。ドキュメントの呼び出しにはAjaxを使っています。WebKit搭載ブラウザで実行すると、モーダルウィンドウの開閉時にアニメーションを伴います。 もともとはiPhone/iPod touch/iPadのSafariに最適化したUIを実現するために制作したものなので、少々挙動にクセがあります。PC向けのウェブサイト用途であれば一般的なLightboxクローン（fancyboxなど）をオススメします。 Demos Open Modal Contents!! Usage Step01 head要素内で jquery.smartModalWindow.jsと、jquery.smartModalWindow.cssをそれぞれ読
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマイズ性の高いモーダルダイアログ実装ができる「plainModal」:phpspot開発日誌
