使用CSS自动调整大小&；中心弹出窗口

我试图有一个弹出窗口，根据屏幕分辨率自动调整大小以适应内容，同时在水平和垂直方向上都保持在屏幕的死点

这就是我目前的处境：

.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上查看演示，然后单击注册按钮

我不理解你的意思，但是如果你想要像你链接的这个网站这样的东西，那就看看如何做吧。 你可以使用jQuery来实现这一点

 $('.button').click(function(){
    $(".content").animate({opacity:"0.3"},500,function(){
        $(".popup").fadeIn();
    });
});
$(".popup").click(function(){
    $(".popup").fadeOut(function(){
        $(".content").animate({opacity:"1"},500);
    });
});

---

这可能就是你要找的

我做了一个例子，在那里我使宽度是静态的，所以在模态中没有不必要的空白

其中一个可以缩放到50%的宽度和高度，就像您使用的那样，并使用“最小宽度”和“最小高度”属性在内容的最小值处停止

如果要为不同的屏幕分辨率创建不同的样式，请使用

希望有帮助

#myModal {
    position: absolute;
    width: 50%;
    height: 50%;
    min-width:500px;
    min-height:230px;
    left: 50%;
    top:50%;
    border-radius: 5px;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);    
}