Question

我们正在使用一种稍微非正统的方法来使用表来启动我们的弹出窗口。从帮助我们的角度来看，这一直很好：

避免任何回发问题。
弹出窗口会根据内容进行扩展，但不会超出视口。
两者，垂直和水平滚动条在需要时显示。
如果您最小化浏览器，滚动条会在需要时显示。

这是代码：

<table bgcolor="white" style="position:fixed; margin-top:40px;  display:block; left: 50%; transform: translate(-50%, 0); max-width:80%; max-height:70%; overflow:auto " border="3" class="simpleroundshadow" >
      <tr>

                        <td align="center" style="padding:30px;"> 

                            <div>
                            contents:<br>

                            </div>


   </td>
    </tr>
    </table>

你可以在这里看到这个： http://atldunia.com/youtube/FixedPosPopup.htm

我们遇到的问题是：

我们无法将关闭弹出按钮自动对齐到右侧。
此外，我们还需要弹出窗口底部的关闭弹出按钮。

您可以注意到顶部的“关闭”按钮不受滚动影响感谢

Answer 1

如果被问到，使用表是非常错误的，但是这是我解决的问题，你必须修改内容行中div的高度。我在div中添加了以下代码：

height: 340px ; overflow: scroll;

我还从输入中删除了样式并将其浮动到右侧。这是完整的代码：

<table bgcolor="white" style="position:fixed; margin-top:40px;  display:block; left: 50%; transform: translate(-50%, 0); max-width:80%; max-height:70%; overflow:auto " border="3" class="simpleroundshadow" >
 <tr>
 <td>
 <input  type="submit" style="float: right;" value="Close popup" name="B3" />
 </td>
 </tr>
 <tr>
   <td align="center">
                            <div style="height: 340px ; overflow: scroll;">
                            contents:<br>
contents:
Please view the page source.
It is only a few lines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

                              contents:
Please view the page source.
It is only a few lines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

                            </div>
   </td>

    </tr>
    </table>

我希望这会有所帮助，如果您感到困惑，这里有Pen

使用css固定位置弹出的问题

1 个答案: