网页弹窗居中显示

让网页中的一个弹窗居中显示

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>始终在中间DIV (支持IE FF)</title>
 6 <!doctype html>
 7 <style type="text/css">
 8 html,body {height:100%; margin:0px; font-size:12px;}
 9 .mydiv {
10 background-color: #f9fff6;
11 border: 1px solid #009900;
12 text-align: center;
13 line-height: 50px;
14 font-size: 13px;
15 font-weight: bold;
16 z-index:99;
17 width: 300px;
18 height: 50px;
19 left:50%;/*FF IE7*/
20 top:50%;/*FF IE7*/
21 
22 margin-left:-150px!important;/*FF IE7 half of its width */
23 margin-top:-60px!important;/*FF IE7 half of its height*/
24 
25 margin-top:0px;
26 position:fixed!important;/*FF IE7*/
27 position:absolute;/*IE6*/
28 
29 _top:       expression(eval(document.compatMode &&
30             document.compatMode==‘CSS1Compat‘) ?
31             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
32             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
33 
34 }
35 </style>
36 <script language="javascript" type="text/javascript">
37     function showDiv(){
38         document.getElementById(‘popDiv‘).style.display=‘block‘;
39     }
40     window.onload=function(){
41         showDiv();
42     }
43 </script>
44 </head>
45 
46 <body>
47 <div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
48 </div>
49 
50 </body>

51 </html>

时间: 2024-07-29 06:44:59

网页弹窗居中显示的相关文章

Js打开网页后居中显示

使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>打开居中的窗口</title> <script language="javascript"> //参数-url:要打开的网站,winname:打开后

window.open()打开弹窗居中显示

我们知道,window.open()如果不设置样式的话,弹出窗体的时候都是小小的一块在左上角,所以我们使用的时候通常要添加样式,而居中显示是符合现代审美与使用习惯的关键一点. function openWin(url, name, iWidth, iHeight) { var url; // 转向网页的地址; var name; // 网页名称,可为空; var iWidth; // 弹出窗口的宽度; var iHeight; // 弹出窗口的高度; // window.screen.heigh

easyUI dialog 弹窗 居中显示

默认情况下应该是在屏幕居中显示的.但是有的时候没有居中只要重新纠正下就可以了 $('#add_dialog').dialog('open'); //打开添加对话框 $('#add_dialog').window('center');//使Dialog居中显示

网页的居中显示,使用了margin、clear:both

很久没写过页面了,现在写起来也觉得捡起来还是挺快的. 当时遇到了这样的问题,我有一个大的div包涵了整个网站,有网页头部,中部还有底部.头部就是一个标题,中部就是几张图片跟文字排版,结果左右两边的图片边距不一样,这根本就不是我一开始想要的排版,在几经修改下,如下. 1.把图片的那个div设为margin:0 50px;这样就是上下边距为0,左右边距各位50.样式如下: body{margin:0;padding: 0px; width:1440px;height:500px;background

JavaScript基础 window.open(url,name,options) 弹出一个 新窗口 屏幕居中显示 获取屏幕的有效宽度

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

Layx——网页弹窗最佳选择.

开源文档地址 开源地址:https://gitee.com/monksoul/LayX 文档地址:http://baisoft.gotoip11.com/layx/doc/ 前言 大家好,我叫百小僧,是一名C#开发工程师,同时也擅长多种程序语言.平时的工作都是开发企业管理系统(ERP.CRM).目前企业管理系统更多都是C/S架构的,而且C/S架构多窗口处理数据更加灵活.刚好公司为了顺应潮流将现有的企业管理系统采用全新B/S架构全新开发,我们最初的想法是在B/S结构界面中采用类似浏览器多标签页模式

盒子细节问题和居中显示

一.盒子模型 https://www.cnblogs.com/smyhvae/p/7256371.html 问题1:盒子的height和width是中间内容框的height和width.这里1234是内容框内的内容.要让内容1234在盒子中居中显示: (1)水平居中显示:text-align:center 设置块状元素中文字的水平对齐 (2)垂直居中显示:    CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<t

横向滚动菜单-选中标题居中显示

很多时候我们都会遇到这种需求,在移动端端显示导航栏横向内滚动,可以左右滑动,同时将选中的目标元素居中显示.那我们该如何去实现呢,不管是APP,移动端段网页还是小程序,其原理都是相同的,接下来我就拿小程序举个例子,先画个图解释下: 具体步骤: 1.获取当前设备的宽度 onShow: function () { // 获取当前设备的宽度 this.setData({ deviceWidth: wx.getSystemInfoSync().windowWidth }) }, 2.获取当前元素的宽度以及

Dreamweaver中用css载入bg-image图片在设计栏不出现但可在网页中正常显示

刚开始以为是dreamweaver软件自身问题,但重启几次软件之后发现不是软件问题,检查css语法也没有问题,又以为是css中某些div遮住了图片,去掉有可能影响图片的div后,发现问题仍在,最后只能去html中寻找问题原因,最终发现少写了</div>,调整后可正常显示. 代码: <div class="divContent"> <div class="divTable"> </div> 修改: <div cla