[B! モーダルウィンドウ] ricopinxのブックマーク

ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方｜Gimmick log

TOPjQuery ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方公開日：2015.11.20 更新日：2016.11.10 jQuery, モーダルウィンドウ animatedModal.js は様々なアニメーション付きでモーダルウィンドウを表示するjQueryプラグインです。 PCはもちろん、スマホやタブレットなどの表示領域が狭いデバイスでも、全画面表示だから有効的に使えそうです。対応ブラウザはIE10↑、その他モダンブラウザ。デモページ必要なファイルを読み込む以下からanimatedModal.js用のファイルをダウンロードして読み込みます。 animatedModal.js配布元必要なファイルはani

ricopinx 2017/06/02

リンク

モーダルを自作してみた

仕事でモーダルを自作することがたまにあるので、ある程度カスタマイズすることを想定して、簡単なモーダルを作成してみました。モーダルの中身はHTMLに埋め込んでおく想定です。サンプルコード .modalがモーダルを立ち上げるリンク、#modal01～modal03がモーダルの中身になります。 .modalのhrefと一致するモーダルの中身が表示されます。 HTML <div id="contents"> <a href="#modal01" class="modal">モーダル1</a> <a href="#modal02" class="modal">モーダル2</a> <a href="#modal03" class="modal">モーダル3</a> </div> <div id="modal01"> <h2>モーダル1の中身です。</h2> <div class="image"><

ricopinx 2016/11/04

リンク

表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト | Web Mugen

シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。）表示コンテンツの切り替えができること。コレが本命。とっても

ricopinx 2016/11/04

次へのボタン表示したいとき

リンク

非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する | UNORTHODOX WORKBOOK | Blog

最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 target擬似クラスを使えばCSSだけでも実装できるようなんですけど、フラグメント識別子を付けたり変えたりすると、ブラウザの「戻る」が反応してしまい、それが好みじゃなかったので、一般的なjQuery＋CSSで実装しています。jQueryといっても、クリックイベントだけなので、実質CSSみたいなものですけど。モーダルウィンドウメニュー以下のリンクから試しに作ってみたもの(デモ)がご覧になれます。右上の「MENU」というところをクリックすると、モーダルウィンドウが表示されるようになっています。 DEMO PAGE 以下、簡単に仕組みとかを書いておきます。モーダルウィンドウメ

ricopinx 2016/11/02

リンク

カッコよくカスタマイズされたグーグルマップをモーダル表示させてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ こないだ「ファイナルファンタジーX HD Remaster」をクリアしまして、マッコリ飲みつつ夜中4時頃エンディングに感動、号泣しとりました(◞‸◟) どうでもいいですね✌(´ʘ‿ʘ｀)✌ さて、今回は「JavaScriptが苦手なあなたへ！グーグルマップを簡単にカッコよくカスタマイズする方法」という記事でご紹介したマップの実装に、モーダルを実装するプラグイン「colorbox」を使用して応用したものを作ってみました✌(´ʘ‿ʘ｀)✌ 以下、ご紹介させていただきますね( ˘ω˘) colorbox http://www.jacklmoore.com/colorbox/ 実装それでは実装方法を解説していきます( ˘ω˘)☝ HTML モーダルを起動させたいボタンとモーダルウィンドウを用意してあげましょう。モーダルウィンドウは