<body> <div > <div ngdialog-content> ...modal content </div. </div><body>
你可以猜到,ngdialog div是一个模态(z-index：10000).
我的目标是,通过对元素应用一些样式(位置,浮点等),使其成为：
a)显示模态时,使叠加(灰色和不透明度; 0.5)覆盖页面中的所有其他元素.
b)如果模态内容比页面长,我希望用户能够使用主滚动条查看模态的底部/顶部.换句话说,如果页面的其余部分仅为100px但模态为200px,我希望scoll bar允许用户滚动额外的100px.
我遇到的问题是,当我将ngdialog定位为绝对值时,窗口将不允许我滚动以查看模态的其余部分(因为绝对元素不再在标准元素流中).
如果我尝试使用固定定位,则没有滚动条.如果我使用相对定位,其他页面元素(覆盖在上面)会被移动.
我已经尝试过(感觉像)所有这些元素的绝对,相对,固定,静态,浮动的每个组合,我无法得到我正在寻找的行为.
请记住,身体是位置：相对(如果需要,可以更改).
在此先感谢,感谢所有评论.
编辑：对不起,我不得不去那里睡觉,这里有一个小提琴：
https://jsfiddle.net/vpgoy756/1/
解决方法 在不改变HTML结构的情况下,这是您需要做的事情：* { /* This was to save tyPing */ margin: 0; padding: 0;}HTML { wIDth: 100%; height: 100%;}body { position: relative; wIDth: 100%; min-height: 100%;}.ngdialog { z-index: 10000; text-align: center; overflow: hIDden;}.ngdialog-overlay { position: absolute; wIDth: 100%; height: 100%; z-index: 9999; background: rgba(0,.4);}.ngdialog-content { position: absolute; z-index: 10000; wIDth: 100%; height: 100%; max-height: 100%; overflow: auto;}.panel { margin-top: 50px; margin-left: 10%; margin-right: 10%; min-height: 500px; z-index: 10000;}.reg-page-block { wIDth: 200px; height: 200px; display: inline-block; background-color: #0f0;} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/CSS/bootstrap.min.CSS" rel="stylesheet"/><!-- ^ from your provIDed fiddle --><body> <div > <div ></div> <div > <div > <div >modal</div> <div >content</div> </div> </div> </div> <div >Regular Page</div></body>
请注意,如果对话框和内容都比视口高,您将获得双滚动条 – 这可能不太理想,但您明确要求对话框与内容分开滚动.
总结以上是内存溢出为你收集整理的html – 用于模态的CSS – 如何将其定位在页面上方但在窗口中可滚动全部内容，希望文章能够帮你解决html – 用于模态的CSS – 如何将其定位在页面上方但在窗口中可滚动所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）