我正在尝试让弹出窗口根据屏幕分辨率自动调整大小以适合内容,同时在水平和垂直方向上都保持在屏幕的死点。
这是我目前所处的位置:
.reveal-modal {
background: none no-repeat scroll 0 0 #eee;
border-radius: 5px;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
padding: 2%;
position: absolute;
visibility: hidden;
z-index: 101;
}
.reveal-child {
display: block;
position: relative;
width: 100%;
height: 100%;
}
效果很接近,但在某些分辨率下仍然不起作用。有些地方容器太大,有些地方太小。理想情况下,我希望容器的大小与内容所需的一样大。
可以在 104.131.228.107 上查看演示并单击注册按钮
我不明白你的意思,但如果你想要像你链接的这个网站这样的东西,那就看here如何做弹出。你可以为此使用 jQuery。
$('.button').click(function(){
$(".content").animate({opacity:"0.3"},500,function(){
$(".popup").fadeIn();
});
});
$(".popup").click(function(){
$(".popup").fadeOut(function(){
$(".content").animate({opacity:"1"},500);
});
});
我是一名优秀的程序员,十分优秀!