【原创】相对完美的垂直居中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下一个版本完成,再继续分享吧.剩下的功 ...
随机推荐
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(三)显示地图坐标系模块
config.xml文件的配置如下: <widget left="3" bottom="3" config="widgets/Coordinat ...
- JAVA模板方法设计模式(从现实生活角度理解代码原理)
概述: 定义一个功能的框架(骨架),一部分功能是确定的,一部分功能是不确定的,先把确定的部分实现,把不确定的部分延迟到子类中实现. 实现该模式的关键步骤: 第一步:抽象类,实现模板方法,定义功能(确定 ...
- 简单的学习心得:网易云课堂Android开发第四章服务、广播与酷特性
1.Service (1)含义:Service是在后台长时间运行的应用组件,所在线程是main线程. (2)使用方式:startService能够执行onStartCommand中操作,bindSer ...
- JDBC快速入门
/** * JDBC快速入门: * 1.导入jar包 数据库驱动 * 2.注册驱动 * 3.获取数据库连接对象 Connection * 4.定义sql语句 * 5.获取发送执行sql语句的对象 St ...
- h5曲线滑动确认
h5项目需根据几条弯曲的线条让用户进行曲线式滑动,滑动时需实时响应某些样式,于是就有了下面这个实例.(可自定义多个子对象大小分别放在线条各处,以增加曲线滑动确认精度.) <!doctype ht ...
- 学习Maven之Maven Enforcer Plugin
1.Maven Enforcer plugin是什么鬼? 在说这个插件是什么前我们先思考这么一个问题:当我们开发人员进入项目组进行开发前,要准备开发环境,而领导总是会强调工具的统一,编译环境的统一.比 ...
- SQL Server 2008 R2 Service Pack 3 已经发布
微软SQL Server Product Team在9月26号官方博客宣布,Microsoft SQL Server 2008 R2 Service Pack 3 (SP3)正式发布了 .具体信息可以 ...
- asp.net mvc 之旅—— 第四站 学会用Reflector调试我们的MVC框架代码
我们知道,现在能调试.net程序通常有两个,第一个是ILSpy,还是一个是Reflector,这两个小反编译软件算是我们研究底层代码中所拥有的一把 锋利小尖刀~~~,比如你看到的ILSpy这样的界面图 ...
- eAccelerator、memcached、xcache、APC 等四个加速扩展的区别
折腾VPS的朋友,在安装好LNMP等Web运行环境后都会选择一些缓存扩展安装以提高PHP运行速度,常被人介绍的有eAccelerator.memcached.xcache.Alternative PH ...
- Linux常用的命令以及一些常见的问题
常用的linux 命令 1查看Linux版本 1.1 查看linux的内核版本 uname -r 或者uname -a 1.2 查看linux的具体版本号 cat /proc/version 1. ...