`
dreamoftch
  • 浏览: 495586 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js小总结 内容居中（水平和垂直） 弹出灰色 div 层 对话框 float

    博客分类：
  • CSS
页面内容居中弹出div层float浮动js总结 
阅读更多
最常用的水平居中的方法是： margin:auto；或者margin:0 auto；（上下margin为0，水平居中），但一定注意要设定好width，如果没有设width则默认是100%，这样就不能显示居中效果
获取浏览器的宽高：
if(typeof window.innerHeight != 'undefined'){
   alert({
         width:window.innerWidth,
         height:window.innerHeight
    });
}else{
  alert({
     width:document.documentElement.clientWidth,
     height:document.documentElement.clientHeight
  });

}
 
获取事件源对象：
function getTarget(evt){
   var e = evt || window.event;
   if(e.srcElement){
        //IE
   }else if(e.relatedTarget){
        //w3c
   }
}
 兼容浏览器的添加事件方法：
//添加事件
function addEvent(obj,type,fn){
   if(obj.addEventListener){//w3c
         obj.addEventListener(type,fn,false);
   }else if(obj.attachEvent){//IE
         obj.attachEvent('on'+type,fn);
   }
}

addEvent(myElement,'click',function(){
    alert('click');
});



//移除事件
function removeEvent(obj,type,fn){
   if(obj.removeEventListener){//w3c
         obj.removeEventListener(type,fn,false);
   }else if(obj.detachEvent){//IE
         obj.detachEvent('on'+type,fn);
   }
}

removeEvent(myElement,'click',function(){
    alert('click');
});


//获取事件目标对象
function getTarget(evt){
   if(evt.target){//w3c
       return evt.target;
   }else if(window.event.srcElement){//IE
       return window.event.srcEvent;
   }

}

//阻止事件传播
function preventEvent(evt){
   var e = evt || window.event;
   if(e.preventDefault){
        e.preventDefault();
   }else{

      e.returnValue = false;
  }
}

//监听ctrl+enter键盘事件
function keyEvent(evt){
   var e = evt || window.event;
   if(e.ctrlKey && e.keyCode == 13){
       //执行操作
       alert('你按下了ctrl和enter键');

   }

}

//获取选定的文本
function getSelectText(obj){
    if(obj.selectionStart){//非IE
         return  obj.value.substring(obj.selectionStart,obj.selectionEnd);
    }else if(obj.selection){//IE
         return obj.selection.createRange().text;
    }
}

//跨浏览器获取按键编码
function getKeyCode(evt){
   var e = evt || window.event;
   if(typeof e.charCode == 'number'){
        return e.charCode;
   }else{
        return e.keyCode;
   }
}


var code = getKeyCode(xxx);
var key = String.fromCharCode(code);//即可转换为键盘的对应的值，如：编码为:49,转换之后就是1


var fm = document.getElementById('myform');
fm.elements;//myform下面的所以表单元素
fm.elements.length;//myform下面的所以表单元素数量
fm.elements[0];//myform下面的第一个表单元素



//对于下拉框：使用select元素的options获取全部的option元素，使用select元素的selectedIndex获取或者设置当前选中的option元素的索引
//得到option元素之后，通过text获取到中间的文本值，通过value获得value属性值,通过option元素的index属性获取该元素的索引
//对于option元素可以使用selected来判断和设定该option元素是否被选中
var sele = document.getElementById('myselect');
var options = sele.options;
$("#myselect").bind('change',function(){
       var ele = this.options[this.selectedIndex];
       alert(ele.value);
       alert(ele.text);
});
jquery 扩展： 
$.fn.test1=function(){
	alert('t c h ?');
}
$.fn.extend({
	test2 : function(){
		alert('t c h 1 ?');
}});


window.scroll事件处理，即窗口滚动事件：

$.fn.smartFloat = function() { 
    var position = function(element) { 
        var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离 
        var pos = element.css("position"); //当前元素距离页面document顶部的距离 
        $(window).scroll(function() { //侦听滚动时 
            var scrolls = $(this).scrollTop(); 
            if($.browser.webkit){
				top = 320;
            }
            if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度 
                if (window.XMLHttpRequest) { //如果不是ie6 
                    element.css({ //设置css 
                        position: "fixed", //固定定位,即不再跟随滚动 
                        top: 0 //距离页面顶部为0 
                    }).addClass("shadow"); //加上阴影样式.shadow 
                } else { //如果是ie6 
                    element.css({ 
                        top: scrolls  //与页面顶部距离 
                    });     
                } 
            }else {
           		element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式 
                  	 	position: pos,
                  	 	top: top 
               	}).removeClass("shadow");//移除阴影样式.shadow             	
            } 
        }); 
    }; 
    return $(this).each(function() { 
        position($(this));                          
    }); 
};


$.fn.pos = function(_top){
	var target = $(this);
	var old_pos = target.css('position');
	$(window).scroll(function(){
		var scrollTop = $(this).scrollTop();
		if(scrollTop > _top){
			target.css({
				 position: "fixed", 
				 top: 0 
			});
		}else{
			target.css({
				position:old_pos,
				top:top
			});
		}
	});
}




$.fn.test1=function(){
	alert('t c h ?');
}
$.fn.extend({
	test2 : function(){
		alert('t c h 1 ?');
}}); 
 
 
 
跨浏览器获取元素的style对象：
function getStyle(element,attr){
  if(typeof window.getComputedStyle != 'undefined'){
       return window.getComputedStyle(element,null)[attr];  
  }else if(typeof element.currentStyle != 'undefined'){
       return element.currentStyle[attr];  
  }
}
 
 
 
 
另外如果要让多个div块级元素在一行显示，则可以通过float:left或者right来实现，也可以通过position:absulute;top:100px;left:100px(具体值自己设定，注意这种方法要求父元素存在position属性，推荐设定为 position:relative)；
注意如果使用了float属性的话，有时候会对父元素的高度和后面的元素的位置产生影响，这时候可以设定父元素的overflow:hidden来消除对父元素的高度的影响，通过在父元素末尾加上clear层来消除对后面的元素的影响：<div style="height:0px;clear:both"></div> 即可；
不管是在整个页面中居中,还是在BOX里居中,不管是text内容还是图片内容,水平居中都是比较简单的,align基本都可以实现.但是垂直居中,就有点小技巧,有一段代码,百试百灵,几乎任何情况下都可以实现居中.
 
 
 
position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;width:200px;height:200px;
 
其中margin-left和margin-top的值为内容的长和宽的一半(例子假设内容的长宽各为200px). 这句的意思是内容的位置为绝对(position:absolute;) 内容位置坐标在环境的中心点(top:50%; left:50%;) 补偿内容的长宽使内容的中心点位置和环境的中心点位置重合(margin-left:-100px; margin-top:-100px;) 用这段CSS就可以解决无论在多大浏览器分辨率下内容总是垂直居中的问题
 
 

1 文字居中

 
<body>

<div style=" line-height:20px; position:absolute; top:50%; left:50%; text-align:center;  margin-top:-10px;">xxxxx</div>

</body>

 

2 图片居中

 
<body>
  <img src="http://portrait1.sinaimg.cn/1258725992/blog/180 " width="180" height="180" style="position:absolute; top:50%; left:50%; margin-left:-90px; margin-top:-90px;"/>
</body>
 

当然,这里不讨论说用table可以如何简单实现居中, 在不按w3c标准情况下,即你的页面代码中没有这段声明情况下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你可以打个长宽都100%的表格,并且把内容都居中,也可以实现这样的效果~~ 以上是我个人经验所得,但妈妈说生活是一盒巧克力,虽然我还没有因为这样使用遇其他的问题,也欢迎有遇到BUG的朋友们给我提醒
 
下面是弹出div层：
弹出层关键：css
        background: #CCC;
        filter:alpha(opacity=30);//IE中透明度设置
        opacity:0.3;//非IE设置透明度
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 998;//设置该div处于其它页面元素的上层，即遮挡的效果
 上面设置了背景遮蔽层的样式，这样就可以让页面的元素都不能被点击
方法一：（链接：http://iask.sina.com.cn/b/15311276.html）
<html>
<head>
<style>
<!--
body{font-family:宋体; font-size:12px; padding:0px; margin:0px;}
.showWindow:hover{color:#FF0000}

.win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;}
.winTitle{background:#9DACBF; height:20px; line-height:20px}
.winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left}
.winTitle .title_right{float:right}
.winTitle .title_right a{color:#000; text-decoration:none}
.winTitle .title_right a:hover{text-decoration:underline; color:#FF0000}
.winContent{padding:5px;}
-->
</style>
<script language="javascript">
function showWindow(){
  if(document.getElementById("divWin"))
  {
	  $("divWin").style.zIndex=999;
	  $("divWin").style.display="";
  }
  else
  {
	  var objWin=document.createElement("div");
	  objWin.id="divWin";
	  objWin.style.position="absolute";
	  objWin.style.width="520px";
	  objWin.style.height="220px";
	  objWin.style.border="2px solid #AEBBCA";
	  objWin.style.background="#FFF";
	  objWin.style.zIndex=999;
	  document.body.appendChild(objWin);
  }
  
  if(document.getElementById("win_bg"))
  {
	  $("win_bg").style.zIndex=998;
	  $("win_bg").style.display="";
  }
  else
  {
	  var obj_bg=document.createElement("div");
	  obj_bg.id="win_bg";
	  obj_bg.className="win_bg";
	  document.body.appendChild(obj_bg);
  }

  var str="";
  str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">弹出式窗口</span><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>';  //标题栏
  str+='<div class="winContent">这是一个页面内部弹出窗口，使用W3C的createElement()方法和appendChild()方法<br />&nbsp;&nbsp;用火狐打开可以拖动窗口(IE拖动可能有问题)</div>';  //窗口内容
  $("divWin").innerHTML=str;
}
function closeWindow(){
  $("divWin").style.display="none";
  $("win_bg").style.display="none";
}
function $(o){
  return document.getElementById(o);
}
function startMove(o,e){
  var wb;
  if(document.all && e.button==1) wb=true;
  else if(e.button==0) wb=true;
  if(wb)
  {
    var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);//获取鼠标摁下的时候，鼠标相对于弹出窗口左边缘的距离
    var y_pos=parseInt(e.clientY-o.parentNode.offsetTop); //获取鼠标摁下的时候，鼠标相对于弹出窗口上边缘的距离
    if(y_pos<=o.offsetHeight)
    {
      document.documentElement.onmousemove=function(mEvent)
      {
        var eEvent=(document.all)?event:mEvent;
        //下面两步保证了弹出窗口跟随者鼠标的移动而移动
        o.parentNode.style.left=eEvent.clientX-x_pos+"px";//设置鼠标移动的时候，鼠标相对于弹出窗口左边缘的距离
        o.parentNode.style.top=eEvent.clientY-y_pos+"px"; //设置鼠标移动的时候，鼠标相对于弹出窗口上边缘的距离
      }
    }
  }
}
function stopMove(o,e){
  document.documentElement.onmousemove=null;
}
</script>
</head>

<body>
<a class="showWindow" href="javascript:showWindow()">点击这里</a>打开窗口<br />
</body>
</html>
 
 
 
方法二：
//width,height是中间弹出的小div的宽、高，page是该小div页面的地址
function openDivWin(width, height,page){
    var msgw,msgh,bordercolor;
    msgw=width;//提示窗口的宽度
    msgh=height;//提示窗口的高度
    titleheight=25 //提示窗口标题高度
    bordercolor="#336699";//提示窗口的边框颜色
    titlecolor="#99CCFF";//提示窗口的标题颜色

    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position="absolute";
    bgObj.style.top="0";
    bgObj.style.background="#777";
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity="0.6";
    bgObj.style.left="0";
    bgObj.style.width=sWidth + "px";
    bgObj.style.height=sHeight + "px";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj);

    var msgObj=document.createElement("div")
    msgObj.setAttribute("id","msgDiv");
    msgObj.setAttribute("align","center");
    msgObj.style.background="white";
    msgObj.style.border="1px solid " + bordercolor;
        msgObj.style.position = "absolute";
    msgObj.style.left = "50%";
               msgObj.style.top = "50%";
               msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
               msgObj.style.marginLeft = "-225px" ;
               msgObj.style.marginTop = -height/2+document.documentElement.scrollTop+"px";
               msgObj.style.width = msgw + "px";
               msgObj.style.height =msgh + "px";
               msgObj.style.textAlign = "center";
               msgObj.style.lineHeight ="25px";
               msgObj.style.zIndex = "10001";

      var title=document.createElement("h4");
      title.setAttribute("id","msgTitle");
      title.setAttribute("align","right");
      title.style.margin="0";
      title.style.padding="3px";
      title.style.background=bordercolor;
      title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
      title.style.opacity="0.75";
      title.style.border="1px solid " + bordercolor;
      title.style.height="18px";
      title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
      title.style.color="white";
      title.style.cursor="pointer";
      title.innerHTML="关闭";
      title.onclick=function(){
          document.body.removeChild(bgObj);
		  document.getElementById("msgDiv").removeChild(title);
          document.body.removeChild(msgObj);
      }
      document.body.appendChild(msgObj);
      document.getElementById("msgDiv").appendChild(title);
      
       var txt=document.createElement("div");
      txt.style.margin="5px"
      txt.setAttribute("id","content");
      document.getElementById("msgDiv").appendChild(txt);
      $("#content").load(page);
 }
 
然后调用该js：
function modifyPassword(){
	openDivWin(500,230,'${pageContext.request.contextPath}/goModifyPassword.action');
}
 

 

 http://blog.sina.com.cn/s/blog_4b06a2680100ble8.html

分享到：
| EL 表达式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    页面中弹出对话框div

    在网页设计中，"页面中弹出对话框div"是一个常见的需求，用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面，而是覆盖在内容上，提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先，让...

    div弹出框、对话框、模态窗口

    在网页设计和开发中，`div` 弹出框、对话框和模态窗口是创建交互式用户体验的重要组成部分。这些元素通常用于显示警告、询问用户输入或者提供额外的信息，而不会中断用户对主要页面的浏览。本文将深入探讨这些概念，...

    弹出层（遮罩层）弹出页面垂直居中

    弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。

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

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

    DIV始终居中的半透明弹出层.rar

    在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...

    DIV水平垂直居中

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

    jQuery弹出层垂直居中效果

    总结，jQuery实现弹出层垂直居中效果主要通过结合CSS布局和JavaScript动态计算来完成。理解基本的布局原理和灵活运用jQuery提供的方法，可以帮助开发者创造出适应各种场景的用户体验。通过不断学习和实践，你可以...

    DIV+CSS水平垂直居中

    使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-left和margin-top属性将其调整到中心位置。例如： &lt;div style="position:absolute;background-color:...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...

    ASP.NET 绝对居中弹出层

    此外，通过设置`position: absolute`和`margin: auto`，我们可以实现弹出层在父容器中的水平和垂直居中。 3. **ASP.NET Controls**：ASP.NET提供了一系列内置控件，如Panel或ModalPopupExtender，这些可以帮助我们...

    网页弹出div层的js-javascript

    网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...

    div弹出层 定位问题的 处理

    在网页设计中，`div` 弹出层（也称为模态框或对话框）是一种常用的交互元素，用于展示重要信息、用户确认操作或者提供额外的功能。然而，为`div`弹出层进行准确的定位可能会遇到一些挑战，因为这涉及到CSS布局、...

    DIV居中及DIV垂直居中.html

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

    JS弹出层，js弹出DIV效果源码下载

    在网页交互中，弹出层和弹出DIV效果是常见的功能，它们可以用来显示通知、警告、对话框或者进行用户交互。本资源提供的"JS弹出层，js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用...

    juqery实现div弹出居中

    在网页设计中，让一个div元素在页面上弹出并居中是一项常见的需求，尤其是在创建模态对话框、提示信息或者加载窗口时。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化这种操作。本文将深入探讨如何使用...

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

    结合以上方法，可以同时实现水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 或者使用CSS Grid： ```css .container { display: grid; ...

Magicbox
Global site tag (gtag.js) - Google Analytics