Question

我正在使用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中的结果类似于：

<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>

结果有趣的是它是style.ads中的durandal改变的样式属性（使用compositionComplete方法）。

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

如果我们转到compositionComplete，关于此方法的评论是： “在将模态完全组合到DOM中之后调用此函数，允许您的实现进行任何最终修改，例如定位或动画。您可以在context.model上使用getDialog获取原始对话框对象。”

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

任何帮助都得到了认可。

Answer 1

最后我使用了compositionComplete

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

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

我希望帮助别人。

Durandal：移动模态弹出到页面顶部

1 个答案: