CSSと少しのJSで作るページスクロールできるモーダルウィンドウ
某案件で対応したモーダルウィンドウ実装が中々曲者だったので、同じような実装を強いられた時に使いまわせるように自分用のメモとして残しておきます。 レスポンシブ対応 モーダルウィンドウ内でスクロール出来る 複数設置対応 基本動作はCSS3で対応（古いIE非対応） スクロールバーの関係で少しJS使う デモ・ダウンロード 何はともあれ、まずはサンプルをご確認下さい。CodePenやサンプルページからもコードを確認可能です。 See the Pen scroll modal window by tokumewi (@tokumewi) on CodePen. Demo zipファイルをDownload 全ソースコード 全ソースコードを載せた後に個別で解説していきます。テキストはスクロール対応を見せるためなのでなんでも良いです。 HTML <!DOCTYPE html> <html lang="ja"
画像のポップアップ表示【JavaScript 動的サンプル】
写真などの画像をクリックすると大きく表示される機能のJavaScriptです。 拡大する速度（ゆっくり、早く）や大きさ、枠、影なども指定することができます。
モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順
プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
