javaScriptモーダルウィンドウのCSSスポンサーリンクモーダルウィンドウのデモデモを作りました。<head>内に読み込んでおきます(1,2行目)。<p>サンプルテキスト。同一にして紐づけます。デモでは「modal1」(つづけて他のボックスは「modal2」「modal3」)としていますが、値は何でも好きなのでOK。同じidの要素をフェードインしてくれます。開くための<a>の「data-target」属性と、開くコンテンツのidを、同一の値にすること。<a>には「modal-open」というクラスを付けます。jsのほうも編集して。モーダルウィンドウになる要素につけているクラス(デモでは「modal-content」)は、単にスタイルのためですので何でもイイです。さんのモノをそっくりそのまま使っていますので、こちらのサイト様をご覧ください。デモでは外部ファイル「modal.js」にしていますが、短いので<head>内にそのまま書いても。自動的に生成してくれます。jsで面倒見てくれますので不要。それ以外のスタイルを指定します。<body>上の他のコンテンツより1つ上にするのを忘れずに。オーバーレイの上に乗っかるモーダルウィンドウ「.modal-content」も、オーバーレイより1つ上にすること。よってフェードインされるので、最初は「display:none」にしておくことが肝心。対して固定位置にしておくことも必要です。ソースコード内でハイライト(背景色つき)の行は必須。そのほかはサイトに合わせて変更する部分です。/*カーソルをポインタに*/100vh(8行目)の「vh」という単位は、CSS3からの新しいモノです。「display:table」を使いました。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。