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

最新推荐文章于 2021-11-04 19:45:00 发布

TCH987551623

最新推荐文章于 2021-11-04 19:45:00 发布

阅读量319

点赞数

分类专栏： CSS 文章标签：页面内容居中弹出div层 float浮动 js总结

本文链接：https://blog.csdn.net/TCH987551623/article/details/84418263

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最常用的水平居中的方法是： 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.οnmοusemοve=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.οnmοusemοve=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.οnclick=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

TCH987551623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小总结内容居中（水平和垂直）弹出灰色 div 层对话框 float

最常用的水平居中的方法是： margin:auto；或者margin:0 auto；（上下margin为0，水平居中），但一定注意要设定好width，如果没有设width则默认是100%，这样就不能显示居中效果获取浏览器的宽高：if(typeof window.innerHeight != 'undefined'){ alert({ width:window...
复制链接

扫一扫