S K*_*S K 7 html css position positioning
我需要将div弹出窗口置于浏览器屏幕的中心(无论屏幕大小是多少).我想保持这个位置是绝对的,因为当我向下滚动页面时我不想将弹出窗口向下移动.
使用Jquery单击按钮时会显示此div.
我尝试将margin-left设置为其他帖子中提到的宽度的一半,但它对我不起作用.
这是我的代码
CSS代码:
.holder{
width:100%;
position:absolute;
left:0;
top:0px;
display:block;
}
.popup{
width:800px;
margin:0 auto;
border-radius: 7px;
background:#6b6a63;
margin:30px auto 0;
padding:6px;
}
.content{
background:#fff;
padding: 28px 26px 33px 25px;
}
HTML代码:
<div class="holder">
<div id="popup" class="popup">
<div class="content">
some lengthy text
</div>
</div>
</div>
谢谢!!
小智 19
.popup-content-box{
position:fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
Jas*_*ssi 17
在这里,这个工作.:)
upd:以防jsfiddle没有响应这里是代码...
CSS:
.holder{
width:100%;
display:block;
}
.content{
background:#fff;
padding: 28px 26px 33px 25px;
}
.popup{
border-radius: 7px;
background:#6b6a63;
margin:30px auto 0;
padding:6px;
// here it comes
position:absolute;
width:800px;
top: 50%;
left: 50%;
margin-left: -400px; // 1/2 width
margin-top: -40px; // 1/2 height
}
HTML:
<div class="holder">
<div id="popup" class="popup">
<div class="content">some lengthy text</div>
</div>
</div>
我在jquery中编写代码.它看起来不是一个简单的方法.但我希望它对你有用.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.popup{
border: 4px solid #6b6a63;
width: 800px;
border-radius :7px;
margin : auto;
padding : 20px;
position:fixed;
}
</style>
<div id="popup" class="popup">
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var popup_height = document.getElementById('popup').offsetHeight;
var popup_width = document.getElementById('popup').offsetWidth;
$(".popup").css('top',(($(window).height()-popup_height)/2));
$(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>
你可以使用CSS3'transform':
CSS:
.popup-bck{
background-color: rgba(102, 102, 102, .5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.popup-content-box{
background-color: white;
position: fixed;
top: 50%;
left: 50%;
z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
*所以你不必使用 margin-left: -width/2 px;
| 归档时间： |
|
| 查看次数： |
140678 次 |
| 最近记录： |