【原创】相对完美的垂直居中popup(modal/dialog),无需监听window.resize事件
<table class="popup" style="position: absolute; background-color: black; border-radius: 10px; top: 50%; left: 50%;">
<tr>
<td>
<div>
<textarea style="margin:10px; background-color:azure; height:150px;width:100px;" contenteditable="true"></textarea>
</div>
</td>
</tr>
</table>
$(function () {
var $popup = $('.popup');
$popup.css({marginLeft: $popup.width() / 2 * -1 + 'px', marginTop: $popup.height() / 2 * -1 + 'px' });
});
使用table的目的是,模拟弹窗的高度会根据弹窗的内容高度显示。
【原创】相对完美的垂直居中popup(modal/dialog),无需监听window.resize事件的更多相关文章
- 安卓奇葩问题之:返回按键监听,使Dialog不消失
本文出处:http://bbs.9ria.com/thread-204406-1-1.html 在做自动更新的时候,弹出Dialog提示,要求是只能点击更新或者取消更新时Dialog才会消失.但是在这 ...
- SharePoint 2010 Modal Dialog
SharePoint 2010 Modal Dialog Tweet Modal dialog play very important role to improve the user exper ...
- Create Custom Modal Dialog Windows For User Input In Oracle Forms
An example is given below to how to create a modal dialog window in Oracle Forms for asking user inp ...
- iframe中的jquery ui modal dialog 覆盖父窗口
在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...
- wxPython Modal Dialog 模式对话框
<wxPython in Action>chap 9 笔记 1. Modal Dialog(模式对话框) A modal dialog blocks other widgets from ...
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- Issue 5158: Modal dialog present (UnexpectedAlertOpen) issue in IE (Similar issue like 3360)
https://code.google.com/p/selenium/issues/detail?id=5158 Reported by mailtopa...@gmail.com, Feb 13 ...
- jQuery BlockUI Plugin Demo 5(Simple Modal Dialog Example)
Simple Modal Dialog Example This page demonstrates how to display a simple modal dialog. The button ...
- VUE实现Studio管理后台(完结):标签式输入、名值对输入、对话框(modal dialog)
一周的时间,几乎每天都要工作十几个小时,敲代码+写作文,界面原型算是完成了,下一步是写内核的HTML处理引擎,纯JS实现.本次实战展示告一段落,等RXEditor下一个版本完成,再继续分享吧.剩下的功 ...
随机推荐
- centos 更换软件源
最近都在使用国内的VPS.系统统一使用的都是Linux系统.但是,有一些服务商的系统给默认设置的是国外的.这样就会导致下载速度缓慢.于是,找到了国内几家比较热门的镜像点.奉献给大家.下面的镜像全部支持 ...
- SharePoint 2013 图文开发系列之应用程序页
在SharePoint中,有两种页面类型,一种是保存在数据库中的页面,我们可以在网站的页面库中看到:还有一种叫做应用程序页,部署在服务器上,Layouts下面的页面,是应用程序页,主要是完成特定功能的 ...
- iOS 学习 - 22 异步解析 JSON,使用 FMDB 存储,TableView 显示
前提是已经知道了有哪些 key 值 Model 类: .h @interface ListModel : NSObject @property (nonatomic, copy)NSString *t ...
- php设计模式 原型模式
原型模式与工程模式作用类似,都是用来创建对象. 与工程模式的实现不同,原型模式是先创建好一个原型对象,然后通过clone原型对象来创建新的对象.这样就免去了类创建时重复的初始化操作. 原型模式适用于大 ...
- Ubuntu1404安装gogs过程
一.Gogs介绍 Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务. Gogs 的目标是打造一个最简单.最快速和最轻松的方式搭建自助 Git 服务.使用 Go 语言开发使 ...
- [C#6] 2-nameof 运算符
0. 目录 C#6 新增特性目录 1. 老版本的代码 using System; namespace csharp6 { internal class Program { private static ...
- 设计模式C#实现(十三)——享元模式(蝇量模式)
意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 运用共享技术有效地支持大量细粒度的对象. 适用性 当以下情况都成立时使用: 一个程序使用了大量的对象 完全由于使用大量对象造成很大存 ...
- 使用 expect 命令执行自动分发系统
一.命令 except 实例详解 1. 介绍 expect 使用场景 expect可以让我们实现自动登录远程机器,并且可以实现自动远程执行命令.当然若是使用不带密码的密钥验证同样可以实现自动登录和自动 ...
- spring cron表达式
其他参考资料 http://www.blogjava.net/hao446tian/archive/2012/02/13/369872.html http://blog.sina.com.cn/s/b ...
- web也是区分前端与后端的,session\cookie辨析
<1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...