我一直在遵循一些关于如何创建对话框的指南:
http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element
由于某种原因,我的CSS没有呈现背景颜色。
这是我的小提琴:http://jsfiddle.net/oampz/8kRc3/
HTML:
<dialog class="modal">This is the dialog!</dialog>
CSS:
.modal {
/* arbitrary styling */
background-color: white;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
height:200px;
width:300px;
/* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
position:fixed;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-100px;
}
.modal::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
任何帮助感激
5条答案
按热度按时间ggazkfy81#
改变背景颜色为任何其他颜色,然后白色!在Chrome中运行:请看这里。.. http://jsfiddle.net/8kRc3/3/
kgsdhlau2#
请用这种方法试试
67up9zun3#
您可以简单地使用:
背景:颜色;
而不是背景色不起作用。
2mbi3lxu4#
根据文档,只有当您调用方法
.showModal()
时,它才有效当对话框显示为
HTMLDialogElement.showModal()
时,可以使用::background CSS伪元素在元素后面设置样式。例如,使模态对话框后面无法访问的内容变暗。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
disbfnqx5#
状态2023:存在
::backdrop
CSS伪元素。有关详细信息,请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop?retiredLocale=en