弹出框设置在页面居中

思路：

　　1.获取当前页面的高和宽、针对顶部和左侧的滑动距离。

　　2.将弹出框的位置设为绝对位置。

3.设置弹出框针对屏幕的左侧和顶部的距离。

代码：

html ：

　　　...... //模态框内容　　

　　 </div>

css: .dialog{ position:abosulte;......}

script: var showDialog(){

　　var objW = $(window);

　　var objC = $(".dialog");

　　var brsW = objW.width();

　　var brsH = objW.height();

　　var sclL = objW.scrollLeft();

　　var sclT = objW.scrollTop();

　　var curW = objC.width();

　　var curH = objC.height();

　　var left = scrlL + (brsW - curW)/2;

　　var top = scrlT + (brsH - curH)/2;

　　objC.css("left":left,"top":top);

}

ps:$(window).resize(function(){//页面窗口大小改变事件

　　showDialog();

});

转载于:https://www.cnblogs.com/hjlblog/p/5626533.html

弹出框设置在页面居中相关推荐

rp9弹出框设置隐藏
1.新建动态面板,作为弹出框-(一般作为新增.修改弹框使用),在面板中添加相关控件. 2.设置弹框相关控件作为组合,右键组合,设置为隐藏. 3.在主界面设置弹框的出现触发机制,比如在"新增& ...
android alertdialog 背景透明,Android Alertdialog弹出框设置半透明背景
自定义AlertDialog基本步骤: 1.写一个layout布局,使用inflater生成对应view对象 2.新建AlertDialog.Builder对象builder 3.builder设置自 ...
android studio 弹出框设置
android studio dialog实现 dialog实现在activity.main中编辑 <?xml version="1.0" encoding="u ...
element组件popper-class属性设置弹出框类名
应用场景: 我们在做vue项目时,根据页面的ui设计,element的样式会被公共的去修改,而不是在vue组件中,但是有的地方element有特例,需要我们单独去修改,而el-cascader.el- ...
element-ui框架的el-dialog弹出框被遮罩层挡住了
如图: 解决办法在el-dialog标签里添加 :modal-append-to-body='false' 实现效果: 问题解析先来看看element-ui官网提供的属性说明文档文档解释:翻译成 ...
弹框位置设置html,JQuery弹出框定位实现方法
JQuery弹出框定位实现方法.直接上代码: //页面代码 (简化) CssClass="ui-button-icons-only" Text="按钮"> ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
android 弹窗有边框_Android 多种简单的弹出框样式设置代码
简介这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样 ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

弹出框设置在页面居中

弹出框设置在页面居中相关推荐

最新文章

热门文章