我已经为我的同事编写了一个内部资源的网络应用程序,基本模板的一部分是一个简单的对话框 - 一个隐藏div
的,在body
和之间,当按钮(另一个)header
出现时出现绝对位置div
被点击,根据点击的按钮显示内容,当点击角落的 X 时消失。你知道例行公事。
所以我怀疑我不应该这样做,但是我发现我还不能在基本模板的 CSS 中描述对话框的 CSS,以便我可以确保它在屏幕上的位置总是或多或少相同。相反,随着对话框内容的尺寸每页的变化,这似乎需要我重新定义对话框的margin-left
和margin-right
在任何给定的页面上。
比如我的对话框的base css是这样的,每次都加载了base html模板:
#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}
请注意缺少边距 - 我还没有找到一个边距值来完成这项工作,而不会导致对话框大小与其中的内容严重不匹配。例如,在内容预计会很大的页面上,我将边距设置为:
#dialogBox {
margin: 5% 10% 0 10%;
}
但是,如果预计内容会更轻,似乎需要在我加载的下一页上再次设置边距,以避开视觉上的恶作剧:
#dialogBox {
margin: 5% 33% 0 33%;
}
这没什么大不了的,但它是重复的。我确信有更好的方法来做到这一点,这样 div 会自然地扩展并保持相等margin-left
,并且margin-right
在任何给定的页面上它都处于打开状态,同时保持其内容的“Goldilocks”大小 - 不太大,也不太小,总是恰到好处。
我意识到在一些 jQuery 库中存在用于“漂亮”对话框的现有基础架构——它们甚至在屏幕上拖动并做一些技巧——但这只是针对内部的、仅限员工的网络应用程序,所以我只是对此没有任何兴趣。另外,很高兴知道如何自己构建一些东西,对吧?我在这方面有点太新了,无法作弊并窃取一堆 CSS,所以我试图诚实地获取知识。
如果我遗漏了与该问题相关的任何代码,我非常乐意编辑我的帖子。
编辑 - 关于将对话框放置在容器中,我有两个很好的答案div
- 我没有完全接受它们的唯一原因只是因为看起来我最终可能需要重新定义每个页面上的尺寸方面,尽管有一些一次性完成的代码。这可能是我的错,因为不同页面上的信息差异太大,我想避免在必要时强迫我的用户滚动页面。设置每页对话框的宽度让我可以做到这一点;我不知道如果把它留给 CSS 会让我这样做。
最终编辑 - 我相信现在接受的答案是我项目的最佳解决方案。