Javascriptレクタングル大TweetPocket今回はレスポンシブ対応のモーダルウィンドウの作成方法をまとめてみました。→→こちらjQueryとアイコンフォントの読み込みまず、jQueryとアイコンフォントを読み込みます。インターネット上に公開してくれているので、URLで読み込むことができます。Font』を使用してみました。Awesomeと同じような使い方ができます。以下を参考にしてみてください。HTMLを記述HTMLを記述します。<p>モーダルウィンドウが開きました。/>郊外のぎらぎらひかる草の波。/>この様に表示することができます。class="modal_box"><h2>ウィンドウ1&lt;/h2><p>モーダルウィンドウが開きました。/>郊外のぎらぎらひかる草の波。/>この様に表示することができます。>』と対応する『<id=”〇〇”>』のモーダルを呼び出しています。id=”modal1′′>』が呼び出されます。class=”modal_close”>』はモーダルを閉じるボタンです。none;}}CSSはクローズボタンのデザイン指定やウィンドウサイズを770pxでレスポンシブ対応するよう切り替えています。function(){modalResize();});});});});フェードイン効果や背景を黒くしたり、モーダルウィンドウを画面の中央に配置する指示をしています。リサイズされる度にモーダルの位置を再計算してくれます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索:プロフィールこのサイトを運営しているユリです。WordPressのコードを書いています。詳しくはこちら他にコスメなどの情報をまとめた「ユリブログ2」も始めました。ご感想やご意見は、お気軽にお問い合わせフォームまでどうぞ。