我正在尝试使用DurandalJS(SPA)框架在应用程序中使用模式,并且无法正确显示模式。目前,当模态打开时,它会显示没有阻塞并水平填充浏览器。
(“Feed”,“New Feed”按钮和“Logout”链接应该被屏蔽掉。)
我已经阅读了the docs几次,我能找到的唯一线索是“默认模态上下文”部分下面的注释:
注意:默认的模态上下文有一些必要的css用于定位 可以在app.css文件中找到。它假定目标 浏览器支持position:fixed。如果您的目标浏览器没有 支持这一点,你应该用一个替换默认的模态上下文 自定义实现。
它提到了一个“app.css”文件......我找不到它。我搜索过DurandalJS的github repo和the only app.css文件没有任何真正影响这个模态的东西(好的或坏的)。有线索吗?
答案 0 :(得分:3)
durandal.css
的内容应该让您入门。
https://github.com/BlueSpire/Durandal/blob/master/Content/durandal.css
.modalBlockout {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: black;
opacity: 0;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.modalHost {
top: 50%;
left: 50%;
position: fixed;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.messageBox {
background-color: white;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
min-width: 300px;
}