Question

我试图根据屏幕分辨率设置一个自动调整大小以适应内容的弹出窗口，同时还保持水平和放大屏幕的死点。垂直。

这是我到目前为止所处的位置：

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

Answer 1

我不理解你，但是如果你想要链接这个网站的东西，那么请看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);
    });
});

Answer 2

这可能是您正在寻找的内容？

我创建了一个fiddle，我将宽度设置为静态，因此模态中没有不必要的空格。

This一个就像你拥有它一样扩展到50％的宽度和高度，并使用＆＃34; min-width＆＃34;停止在你的内容的最小值。和＆＃34; min-height＆＃34;属性。

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

希望有所帮助

#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%);    
}

使用CSS自动调整大小＆amp;中心弹出窗口

2 个答案: