Question

我有div个班级.popup。我有一个用于打开另一个图库的iFrame，但是当我使用jQuery显示弹出窗口时，它不是居中并且是最顶层的页面元素。

CSS

.popup {
    border: 1px solid #ccc;
    width:inherit;
    border-radius: 7px;
    margin-right: auto;
    margin-left:auto;
    padding: 20px;
    position:absolute;
    z-index: 1000;
    background-color: #f0f0f0;
    height:400px;  
}

HTML

<div class="popup " style="display: none">
    <div class="col-lg-12" style="padding-bottom: 10px;">
        <input onclick='SelectImage(inputImage)' class="btn btn-xs btn-success pull-left" type="button" value=" بازگشت " />
        <input id="btnImageSelect" onclick='SelectImage(inputImage)' class="btn btn-xs btn-success" type="button" value="تایید عکس" />
    </div>
    <iframe id="iframeImage" src="../filemanager/ImagePicker.aspx" width="100%" height="320" frameborder="1"></iframe>
</div>

如何解决此问题以及丢失的代码在哪里？

Answer 1

$(document).ready(function(){
  var width  = $(.popup).width();
  var height  = $(.popup).height();
  $(".popup").css({"top":"50%", "left":"50%", "margin-top":height/2+"px", margin-left:width/2+"px"});   
});

这会将div移到中心位置。

Answer 2

我不确定你在width: inherit寻找什么。这将始终使您的弹出窗口与其父元素一样宽，因此不需要居中。但是，对于position: absolute，您的弹出窗口将根据您网页的body元素或position: relative的父元素进行定位。

如果我正确理解你的问题，这就是我要做的事情：

我假设width在这里未知。

.popup {
    ...
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
}

这是一个小提琴：http://jsfiddle.net/ugys4znt/

如果您希望弹出窗口即使在用户滚动时仍保留在屏幕上，请使用position: fixed。

请使用width: inherit详细说明您要实现的目标，我会尽快回复您。

如何解决弹出中心屏幕Div类？

2 个答案: