[B! coding][jquery] [2ページ] axcelbkmのブックマーク

【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【modaal.js】

jQueryプラグインのmodaal.jsを利用します。レスポンシブ対応で、bodyのスクロールバーは非表示です。html内のソースをidで指定してモーダルウィンドウ内に表示します。サンプルデモはこちらなお利用にはCSSファイルとjsファイルの読み込みが必要です。 <link rel="stylesheet" href="css/modaal.min.css"> <script src="js/modaal.min.js"></script> まず、htmlのコードです。モーダルウィンドウを開くリンクにaタグを使用し、href属性でモーダルウィンドウのdivタグのidを指定します。aタグを使用しない方法もありますが、基本的にはこの条件でモーダルウィンドウを起動します。またモーダルウィンドウは非表示にする必要がありますが、まとめてクラス名modal-wrap01とmodal-wrap0

axcelbkm 2021/01/13

リンク

超簡単！jQueryを使ったレスポンシブ対応クリッカブルマップ『jQuery RWD Image Maps』 - 株式会社ネディア │ネットワークの明日を創る│群馬

前回までにメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』やレスポンシブ対応に最適な『jQueryを使った折りたたみ式のグローバルメニュー』をご紹介しました。今回は、レスポンシブに対応した jQueryを使ったクリッカブルマップ（イメージマッピング）『jQuery RWD Image Maps』についてご紹介いたします。クリッカブルマップ（イメージマッピング）メリット、デメリットクリッカブルマップのメリット複雑なデザイン（紙媒体用のチラシや、建設業の設計図や地図など）に対してリンクを貼る際に工数を短縮できる。元々のデザインを損なうことがない。クリッカブルマップのデメリット画像が大きくなりがちでページが重くなる。画像内テキストがSEOとして働かない。レスポンシブ対応を行うと画像サイズが可変となり、リンクエリアがずれる。デメリットのうち、1つ目