jOueryでのモーダルウィンドウでコンテンツ部分が表示されません。
こちらのサイト（ ttp://coolwebwindow.com/jquery-lab/archives/304）を参考に、以下のようなソースを書きましたが、オーバーレイは表示されるものの、肝心のコンテンツ部分（.modal_content）が表示されません。
また、リンクの箇所で、p要素でaを囲んでいるとリンクがクリックできないのですが、p要素を外すとオーバーレイが表示されます。
これはなぜでしょうか。
おわかりの方がいらっしゃいましたら、教えていただきたいです。
----- HTML -----
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><a class="modal_open" data-target="con1">リンク1</a></p>
<div class="modal_content con1">
<p>コンテンツ1コンテンツ1コンテンツ1コンテンツ1</p>
<p><a class="modal_close">閉じる</a></p>
</div>
<div>
<p><a class="modal_open" data-target="con2">リンク2</a></p>
<div class="modal_content con2">
<p>コンテンツ2コンテンツ2コンテンツ2コンテンツ2</p>
<p><a class="modal_close">閉じる</a></p>
</div>
</body>
</html>
----- CSS -----
.modal_content {
position:fixed;
display:none;
z-index:2;
width:50%;
margin:0;
background:#fff;
}
.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}
jQueryの部分はコメント欄に記載します。
みんなの回答 2 件
----- jQuery -----
$(function(){
$(".modal_open").click(function(){
$("body").append(’<div id = "modal_overlay"></div>’);
$("#modal_overlay").fadeIn("slow");
var modal = ’.’ + $(this).attr(’data-target’);
modalAppear();
$("#modal_overlay, .modal_close").click(function(){
$(".modal_content, #modal_overlay").fadeOut("slow", function(){
$("#modal_overlay").remove();
});
});
$(window).on("load resize", function(){
modalAppear();
});
function modalAppear() {
var w = $(window).width();
var h = $(window).height();
var cw = $(w - $(".modal_content").outerWidth({margin:true})) / 2;
var ch = $(h - $(".modal_content").outerHeight({margin:true})) / 2;
$(modal).css({"left": cw + "px", "top": ch + "px"}).fadeIn("slow");
}
});
});
よろしくお願いします。
当該記事を書いた、CoolWebWindowの管理人、vanillaと申します。
この度は、当記事をご参考くださり、誠にありがとうございます。
提示されているソースコードで試してみましたが、仰っている
＞オーバーレイは表示されるものの、肝心のコンテンツ部分（.modal_content）が表示されません。
＞また、リンクの箇所で、p要素でaを囲んでいるとリンクがクリックできないのですが、p要素を外すとオーバーレイが表示されます。
というのを再現できませんでした。
一応、「リンク1」をクリックすると「コンテンツ1コンテンツ1（省略）閉じる」というテキストが表示されました。
間違いが有るとすれば、jQueryでは「#modal_overlay」と記述しているのに、CSSでは「.modal-overlay」と記述している点でしょうか。
よろしければ、HTMLファイルをメールで送っていたければ内容を見ますよ。
ここで提示されているのは実際のソースコードとは若干異なるので、的確なアドバイスが出来ません。
メールアドレスはCoolWebWindowのサイトに明示しております。
よろしくお願いいたします。
関連するトピックス