Question

所以我创建了一个按钮，隐藏并显示带占位符文本的div：

<button id="btn1">Click to display div1</button>
<div id="div1"></div>

＃div1定位为绝对原因我不想修复它。

当我点击我的按钮时，如何让它出现在窗口屏幕内？并且在窗口屏幕上有10px的顶部？

还有一个问题我如何将这个div居中？

Here is the Fiddle

Answer 1

这对你有什么用：http://jsfiddle.net/wildandjam/KXW9v/

我所做的是添加到＃div1：

top:10px;
left:50%;
margin-left:-250px;

但是我认为要获得它的效果＆＃34;弹出＆＃34;关于窗口而不是文档，您可能需要使用固定的？

Answer 2

最高值可以直接输入＃div1 css，如

#div1 {
    top: 10px;
}

因为＃div1定位为绝对值，我会像这样计算div的左值：

$("#btn1").click(function(){
    var leftVal = ($(window).width() - $("#div1").width())/2;
    $("#div1").css("left", leftVal);
    $("#div1").fadeToggle(); 
});

因此，无论何时切换按钮，都会获得窗口宽度，并使＃div1相对于它居中。只要您的窗口宽度不低于500px，它就是基本响应式解决方案。我建议使用百分比值作为#div1宽度，所以即使窗口宽度小于500px，这也可以。

小提琴：http://jsfiddle.net/UmC8B/4/

提供响应式＃div1（70％）：http://jsfiddle.net/UmC8B/7/

Answer 3

要使其响应，请为div指定％age的宽度和高度，并在％age中添加按钮的bottom属性。而且因为我给了div的宽度为80％，所以给左边的属性为10％（10％L + [80％] + 10％R）。希望这是你想要的。

#div1{
  position:absolute;
  background-color:#007c7c;
  width:80%;
  height:25%;
  left: 10%;
  overflow: auto;
  color:white;
}

Demo

Answer 4

您的div必须在CSS文件中定位为绝对 - 如果您想隐藏它，您也可以在链接到HTML页面的CSS文件中执行此操作。要切换div，请尝试：

$("#btn1").click(function() {
    $("#div1").toggle();
});

Answer 5

试试这个

$("#btn1").click(function(){

  $("#div1").css("top",($(document).scrollTop() + 10) +'px').fadeToggle(); 

});

将div设为中心

#div1{
    position:absolute;
    background-color:#007c7c;
    width:500px;
    height:500px;
    color:white;
    left:50%;
    margin-left:-250px;
}

正在使用 DEMO

如何相对于窗口页面定位div（响应式css）

5 个答案: