如何控制弹出的Model模态窗口所在的位置。

Question

1. 我在页面生成了一个Model模态窗口，可是弹出的窗口总在页面的最中间，而我想要的效果是当前窗口的正中间，所以想请教一下各位大神，改如何实现。

---

<button type="button" class="am-btn am-btn-secondary am-btn-xs am-radius am-fr" 
                                        data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 500, height: 520}">新增</button>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1" style="margin-top:0px;">
    <div class="am-modal-dialog" style="height:100%;">
        <div class="am-modal-hd" style="margin-bottom:20px;">人员（新增）
            <a id="close" href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd" style="height:89%;">
            <iframe src="<%=path%>/people.do"  name="iframepage" frameBorder="0" scrolling="no" height="100%" width="100%"></iframe>  
        </div>
    </div>
</div>

以上是我的代码，请教大神

Answer 1

如果你的模态框宽高固定，并且只想用css的话：

.modal {
    position: fixed;
    top: 50%;
    lef: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;/* margin 负值为宽高的一半 */
}

如果你的模态框宽高不固定，那最好动态计算：

function position(dom) {          
    var width = dom.outerWidth(),
        height = dom.outerHeight(),
        $window = $(window),
        bodyWidth = $window.width(),
        bodyHeight = $window.height(),
        scrollTop = $window.scrollTop();
    dom.css({
        top: (bodyHeight / 2 - height / 2) / 3 * 2 + scrollTop,
        left: bodyWidth / 2 - width / 2
    });

};

有兴趣可以看看我以前写过的这种组件Mcom

Answer 2

强制设置top 和left属性

Answer 3

模态框的 margin 值设置为 margin: 0 auto;

希望有所帮助~ ：）