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

how to resolve popup center screen Div class?

本文关键字：屏幕 Div 何解决 解决      更新时间：2023-10-24

我有一个类为.popup的div。我有一个用于打开另一个图像库的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>

我该如何解决这个问题？我丢失的代码在哪里？

$(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居中移动。

我不确定您在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实现的更多目标，我会回复您的。

相关文章：