为啥弹出窗口出现在底部而不是在中心？

Posted 2023-02-22

【中文标题】为啥弹出窗口出现在底部而不是在中心？

【英文标题】：Why does a popup appear at bottom instead of being in center?为什么弹出窗口出现在底部而不是在中心？

【发布时间】：2016-05-01 00:54:15

【问题描述】：

我在 ajax 模态扩展器中有一个图像。当在gridview中单击按钮时，它会成功显示，但默认情况下图像会滚动到页面的右下角，并且只有在我按下键盘上的向下箭头时才会出现在中心位置。为什么 ？默认情况下如何将其置于中心？

<asp:ModalPopupExtender ID="mdlMessageBox" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField1"

<asp:ImageButton ID="ImageLetterCopy" OnClick="ImageLetterCopy_Click"  style="max-width: 100%;max-height: 100%"   runat="server" />

CSS

 <style type="text/css">
        .modalBackground 
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        

        .modalPopup 
            background-color: whitesmoke;
            border-width: 0px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            /*width: 600px;
            height: 280px;*/
        
    </style>

【参考方案1】：

为.modalPopup 添加这些：

.modalPopup 
  background-color: whitesmoke;
  border-width: 0px;
  border-style: solid;
  border-color: black;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  /* Additions */
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;

【参考方案2】：

用 flex 布局试试这个

 .modalBackground 
 background-color: Black;
 filter: alpha(opacity=90);
 opacity: 0.8;
 display: flex; 
 align-items: center; 
 justify-content: center; 
 

.modalPopuppadding: 10px; max-width: 360px;

【讨论】：

检查这个小提琴并跟随兄弟..jsfiddle.net/tq1bgk2s/#&togetherjs=bdS1d8HcKc