将莫代尔中心置于可行区域
Center Modal in viable area
我正在构建自己的自定义模式/对话框,我想将它放在可视区域的中心。例如,如果网页很大,查看器向下滚动很远,然后单击打开我的自定义模式/对话框,它就会打开,但用户必须滚动到顶部才能看到它。我希望模式在可视区域的中心打开。有人能告诉我如何计算可视区域的中心吗,这样当模态显示时,它就可以绝对地定位在那里。
Twitter引导程序用他们的Modal来实现这一点,在那里它可以滑到可视区域的中心,我想用我的自定义小部件
例如,我使用的是这样的东西:
$(function() {
/**
* Moves an element to the center of the current screen (considering scrolling)
*/
$.fn.center = function (position) {
for (var i = 0; i < this.size(); i++) {
var t = $(this[i]);
t.css("position", position || "absolute");
var extra_top = position != "fixed" ? $(window).scrollTop() : 0;
var extra_left = position != "fixed" ? $(window).scrollLeft() : 0;
t.css("top", Math.max(0, ($(window).height() - t.outerHeight()) / 2 + extra_top) + "px");
t.css("left", Math.max(0, ($(window).width() - t.outerWidth()) / 2 + extra_left) + "px");
}
return this;
}
...
});
用法:$("#modal").center();
实现这一点的最简单方法是查看模态窗口的高度和宽度。然后,将位置设置为固定
top: 50%;
left: 50%;
margin-left: - "INSERT WIDTH DIVIDED BY 2"
margin-top: - "INSERT HEIGHT DIVIDED BY 2"
这将始终使模态在页面上居中。
.page{
position: absolute;
height:1000px;
width:1000px;
background-color: blue;
}
.modal{
width: 300px;
height:300px;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
position: fixed;
background-color:red;
}
看看我的附件jsfiddle。http://jsfiddle.net/yxTSh/
相关文章:
- 正在寻找一个类似于facebook的文本区域大小调整插件
- Twitter 引导 - 点击时专注于模态内的文本区域
- 正在寻找类似于mircrosoft office autocorrect的jquery文本区域脚本
- 使用 jquery 专注于引导文本区域
- 如何按类名将配置应用于文本区域
- 在 tinyMCE 中,将格式应用于非编辑区域
- 将莫代尔中心置于可行区域
- 将jquery事件应用于表中的特定区域或行
- 将jquery代码应用于多个文本区域
- -webkit点击未应用于区域标记的突出显示颜色
- 文本区域标签高亮显示应用于第一行之后的错误位置
- 是否有一个JavaScript/css的方法,使同步滚动区域类似于"meld"
- 如何找到可拖放元素相对于可拖放区域的位置?
- 输入空,并专注于文本区域
- 不能将setAttributeNode应用于文本区域
- 显示日期独立于系统区域设置,并按照应用程序语言
- 当右击选择区域外时,允许复制当前选择区域(相对于取消选择)
- 如何将javascript应用于文本区域的选定文本
- 将webkit滚动条样式应用于文本区域
- 服务器端检查点'存在于多边形区域使用Google Maps API v3