ポップアップdivで問題が発生しています。ポップアップが中央に配置されないように、ポップアップを本体に対して相対的に配置できるようにしたいと思います。私が抱えている問題は、それらがナビゲーションdiv内にネストされており、これを画面の中央に表示したいので絶対に配置する必要があるため、これに対してのみ配置できることです。
したがって、私が抱えている2つの問題は次のとおりです。
- ボディに対してDivを配置できません。
- divが表示されると、ナビゲーションアイテムが所定の位置から押し出されます。
解決：
- divに現在の親divを無視させ、本体divに関連する位置に配置する方法を見つけます。
以下に、jsFiddleで私のコードを見つけることができます。よろしくお願いします。
HTML
<div id="menu">
<div id="name"><a href="" title="">name</a></div>
<ul id="nav">
<li><a class="pop-up-link" href="#" title="about">about</a> |
<div class='about'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
<p>content</p>
</div>
</li>
<li><a class="pop-up-link" href="#" title="press">press</a> |
<div class='press'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
<p>content</p>
</div>
</li>
<li><a class="pop-up-link" href="#" title="diary">contact</a> |
<div class='contact'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
<p>content</p>
</div>
</li>
<li><a class="pop-up-link" href="#" title="contact">diary</a>
<div class='diary'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
<p>content</p>
</div>
</li>
</ul>
</div>
CSS
body {
position: relative;
width: 100%;
height: 100%;
}
#menu {
position:fixed;
overflow: visible;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
text-align: center;
}
#name {
font-size: 26px;
line-height: 50px;
vertical-align: middle;
border-bottom: 1px solid #000;
}
#nav li{
font-size: 14px;
width: 300px;
line-height: 25px;
vertical-align: middle;
display: inline;
}
.close {
float: right;
position: relative;
z-index: 99999;
margin: 3px 6px 0;
}
.about {
position: relative;
padding: 5px;
background: #F7E39A;
display:none;
width:500px;
margin: 0 auto;
min-height: 200px; }
.press {
position: relative;
float: right;
top: -200px;
right: 500px;
padding: 5px;
background: #DEA1B7;
display:none;
width:250px;
min-height: 200px;
}
.contact {
position: relative;
padding: 5px;
background: #6666FA;
display:none;
width:500px;
margin: 0 auto;
min-height: 200px;
}
.diary {
position: relative;
float: left;
top: 0px;
padding: 5px;
background: none;
border: #291DFA 1px solid;
display:none;
width:100px;
min-height: 200px;
}
jQuery
$(function() {
var height = $(document).height();
var width = $(document).width();
var spanHeight = $('.popup').height();
var spanWidth = 500;
$('.pop-up-link').click(function() {
$(this).next()
.css({ "top" : height/2 - spanHeight/2 }) // Centre Pop Up
.css({ "left" : width/2 - spanWidth/2 })
.fadeIn(500);
});
$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500);
});
});
解決
ポップアップがbodyタグの子になるようにコードを作り直して、本体に対してポップアップを配置できるようにしました。SimpleModelsを使用しており、パーセンテージを使用してdivを配置しています。
jQuery(function ($) {
$('#menu .about').click(function (e) {
$('#about-content').modal({position: ["20%","65%"]});
return false;
});
});