Question

我正在尝试创建覆盖弹出窗口，该窗口可以重复用于不同的内容，例如关于我们，联系我们，登录...

这是基本的html：

 <div class="overlays__map-overlay">
     <div class="map-overlay__block">
           //content from AJAX calls goes into here     
      </div>
 </div>

和css：

.overlays__map-overlay{
    display: none;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0, 0.3);
}
.map-overlay__block{
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    background-color: rgba(105,105,105, 0.9);
    border-radius: 5px;
    width: auto;
    margin-top: 15%;
    max-width: 90%;
}

我想要的是.map-overlay__block占用我放入其中的内容的宽度。例如，如果用户点击“关于我们”页面，那么我放入width: 90vw;的内部容器，但如果点击“登录”，则执行ajax调用并返回容器宽度为500像素的登录页面html。

$('.nav-link').on('click', function(e) {
            e.preventDefault();
            var actionUrl = $(this).attr('href');
            $.getJSON(actionUrl, function(jsonResponse){
                $('.overlays__map-overlay .map-overlay__block').html(jsonResponse.view);
                $('.overlays__map-overlay').css('display', 'block');
            });
        });

问题是map-overlay__block总是需要90％的宽度！我尝试使用display选项改为inline-block。它确实占用了子元素的宽度（登录页面为500px）但是margin-left:auto; margin-right:auto;规则停止工作以使其居中。

Answer 1

＆＃34;问题是map-overlay__block总是占据宽度的90％！＆＃34;

你有

    max-width: 90%

在css。

Answer 2

使用flex boxes

添加以下叠加层

display: flex;
align-items: center;

工作示例：

＆＃13;

function moreContent(){
document.querySelector('.map-overlay__block').innerHTML = "Echo park tumblr meggings, pabst glossier yuccie iceland street art sriracha sartorial vegan thundercats green juice. Cornhole pork belly 90's prism, portland ennui kitsch dreamcatcher retro tumblr austin. Echo park normcore skateboard banh mi, small batch synth air plant fashion axe gastropub fap flexitarian godard sriracha blue bottle green juice. Cred mumblecore kale chips tumblr, pitchfork bushwick green juice fingerstache health goth truffaut XOXO cronut. Jianbing disrupt 3 wolf moon farm-to-table food truck. Meditation mumblecore post-ironic gastropub man braid. Af paleo franzen, la croix banjo man bun lumbersexual cold-pressed lyft mlkshk artisan.";
}

＆＃13;

.overlays__map-overlay{
    //display: none;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0, 0.3);
  
    display: flex;
    align-items: center;
}
.map-overlay__block{
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    background-color: rgba(105,105,105, 0.9);
    border-radius: 5px;
    width: auto;
    max-width: 90%;
}

button {
  position: relative;
  z-index: 100
}

＆＃13;

<div class="overlays__map-overlay">
     <div class="map-overlay__block">
           //content from AJAX calls goes into here
      </div>
 </div>

<button onclick="moreContent()">More Content</button>

＆＃13;

Answer 3

根据不同的ajax调用添加不同的类。例如：

.map-overlay_block { width: auto)

.map-overlay_block.about { width: 90vw}

.map-overlay_block.login { width: 500px}

如何让父div占据孩子的宽度并保持水平居中？

3 个答案:

使用flex boxes

工作示例：