Durandal：将模式弹出到页面顶部答案

【问题标题】：Durandal:Move modal pop up to top of pageDurandal：将模式弹出到页面顶部
【发布时间】：2013-10-17 20:01:31
【问题描述】：

我正在使用 durandal 和 twitter-bootstrap，我有一个页面，其中有一个模式弹出窗口。模态弹出窗口的代码类似于：

<div id="reportModal" class="messageBox messageBox-fixedSize">
    <div class="modal-header">        
    </div>    
    <div class="modal-body" >          
    </div>
    <div class="modal-footer ">
    </div>
</div>

chrome 中的 RESULT 类似于：

<div id="reportModal" class="messageBox messageBox-fixedSize ui-draggable" data-view="views/Reports/reportWindow" style="position: relative; margin-top: -151.05555534362793px; margin-left: -395.55555534362793px;" data-active-view="true">
<div class="modal-header">
</div>    
<div class="modal-body">
</div>
<div class="modal-footer ">

</div>

结果的有趣之处在于从 dialog.js（使用 compositionComplete 方法）为 durandal 更改的样式属性。

style="position: relative; margin-top: -151.05555534362793px; margin-left: -395.55555534362793px;"

如果我们去compositionComplete，关于这个方法的cmets是： "这个函数在modal完全组成DOM后调用，允许你的实现做任何最后的修改，比如定位或者动画。你可以通过context.model上的getDialog获取原始对话框对象。"

我的问题是如何根据这种方法添加新位置（到页面顶部）？

感谢任何帮助。

【问题讨论】：

右键单击元素并找到样式并查看它是如何计算的。很容易破译...
我已将图片附加到问题中。
点击计算选项卡，它会告诉你什么是优先的并分配该样式
我上传了一张新图片，奇怪的是我没有看到谁负责添加这些属性。检查第二个链接
Durandal 负责添加这些属性。你问它。查看durandal.css 中的modalHost 和messageBox CSS 类。您如何显示此弹出窗口 - 使用 app.showMessage() 函数或 dialog.show()？那么你真的应该知道 durandal 中的 dialog.js 模块正在这样做。

标签： javascript twitter-bootstrap durandal

【解决方案1】：

最后我用compositionComplete

public compositionIsCompleted(){
    var styles = {
        'position': 'absolute',
        'margin-top': '-360px',            
        'margin-left':'-250px'
    };

    $("#reportModal").css(styles);
}

希望对其他人有所帮助。

【讨论】：