`

div 垂直居中显示

 
阅读更多
div 垂直居中显示


<div id="popbox_sw" class="popbox_sw" style="display:none;position:absolute;z-index:100; border:solid 1px #79BCFF; background-color: #EEF2FB;">
  <div class="popupheader"><i18n:message key="cert.assigncertsum.title.submit.result.title" bundle="<%=bundle%>" /><div class="closebutton" onClick="closewindow();">
  <i18n:message key="cert.assigncertsum.title.submit.result.close" bundle="<%=bundle%>" />&nbsp;
  <html:img src="GSHPICON_CLOSE.gif" onClick="closewindow();" /></div></div>
  <div class="popcontent_il">
    <ul>
    <li><i18n:message key="cert.assigncertsum.title.submit.result.content" bundle="<%=bundle%>" /></li>
   </ul>
</div>

<script language="JavaScript">
function showWindow(){
  mask=document.createElement("div");
  var W=$(document).width();
  var H=$(document).height();
  mask.id="mask";
  mask.style.cssText="position:absolute;z-index:99;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
  document.body.appendChild(mask);
  var o = document.getElementById("popbox_sw");
  o.style.display="block";
}

function closewindow(){
document.getElementById("popbox_sw").style.display = "none";
var node =  document.getElementById("mask");
document.body.removeChild(node);
}

</script>

<script>
(function($){
$(function(){
function keywordCheck(){
var screenx = $(window).width();
var screeny = $(window).height();
var checkx = (screenx - $('#popbox_sw').width())/2;
var checky = (screeny - $('#popbox_sw').height())/2;
$('#popbox_sw').css({top: checky + "px",left: checkx + "px"});
}
$(document).ready(function(){
keywordCheck();
});
$(window).resize(function(){
keywordCheck();
});
});
})(jQuery);
</script>


分享到:
评论

相关推荐

    DIV 垂直居中

    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    div垂直居中屏幕

    div垂直居中屏幕的方法,兼容IE6 7 8 Firefox

    div垂直居中的N种方法

    ### DIV垂直居中的N种方法:详尽解析与实践 在网页设计中,DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求,还是美观度的提升,垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    垂直居中显示ie7+

    在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上无论何时都能保持居中状态,能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    未知图片大小在div里可以垂直居中显示

    任意图片在div里的垂直居中!

    DIV水平垂直居中

    在网页设计中,让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题,"DIV水平垂直居中",通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中,描述提到使用了jQuery来实现,这是一...

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    div 垂直居中的多种方法详细介绍

    例如,设置`div`的`height`和`line-height`为`25px`,这样文本就会在`div`中垂直居中显示。此外,为了防止内容超出容器或自动换行,可以添加`overflow:hidden`属性。 第二种方法适用于多行未知高度的文本垂直居中。...

    Jsp中如何让图片在div中居中

    通过上述方法,结合适当的CSS和HTML代码,即使在JSP页面中也能有效地使图片在div中水平和垂直居中显示。在实际应用时,还需注意图片的尺寸要适当配合div容器的尺寸,以达到最佳的视觉效果。 最后,还需提一下,如果...

    在DIV中图片垂直/水平居中(最简单方法).rar

    在网页设计中,将图片在div中垂直和水平居中是一项常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标,同时也会涉及JavaScript(JS)的一些特效,尽管在描述中没有明确指出...

    DIV+CSS DIV居中布局

    例如,垂直居中和水平居中可以分别使用Grid和Flexbox来实现。 在提供的`demo.html`文件中,可能包含了这些居中布局的示例代码。`logo.png`可能是用来测试这些布局效果的图片。通过查看和分析这些文件,可以进一步...

    div内容 垂直居中

    通用所有浏览器, 欢迎大家分享。 绝对是真的

    div中多行文字垂直居中

    在网页设计中,让多行文字在`div`元素中垂直居中是一项常见的需求,尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样,每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...

    使用css实现div垂直居中的示例

    在网页设计中,让元素居中是常见的需求,特别是对于`div`这样的块级元素,垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先,我们要理解CSS布局的基本概念。在网页中,...

Global site tag (gtag.js) - Google Analytics