css+js 控制弹出层

1：简单的显示隐藏div

 

function Show()
{
document.getElementById( ' bot ' ).style.display = '' ;
}
function Hide()
 {
           document.getElementById('bot').style.display = 'none';
    }

<a  href="#"   οnclick="Show('<%#Eval("ID")%>','<%#Eval("val1") %>')">修 改</a>

<div id="bot" style="z-index:100; border:1px solid #333;  height:360px; width:301px; padding:20px; display:none; position:absolute; left:20%; top:20%; background:#f3f3f3">
      用户名：
      <input type="button" id="Button2"  value="取 消" 
style="height: 21px; margin-top:30px;" οnclick="Hide()"  />
    </div>

2: 可以鼠标拖动的，并且背景置灰的

 

代码

// JScript 文件
function openBg(state){ // 遮照打开关闭控制
if (state == 1 )
{
document.getElementById( " bg " ).style.display = " block " ;
document.getElementById( " bg " ).style.width = getPageSize( 2 ) + " px " ;
document.getElementById( " bg " ).style.height = getPageSize( 1 ) + " px " ;
}
else
{
document.getElementById( " bg " ).style.display = " none " ;
}
}

function AfterSelect(state){ // 中心层关闭打开控制
if (state == 1 )
{
document.getElementById( " jubaodivback " ).style.display = " block " ;
document.getElementById( " jubaodivback " ).style.left = (document.getElementById( " bg " ).offsetWidth - document.getElementById( " jubaodivback " ).offsetWidth) / 2 + " px " ;
document.getElementById( " jubaodivback " ).style.top = document.body.scrollTop + 100 + " px " ;
document.getElementById( " jubaodivback " ).style.position = " absolute " ;
document.getElementById( " jubaodivback " ).style.zIndex = " 2000 " ;
}
else
{
document.getElementById( " jubaodivback " ).style.display = " none " ;
}
}

function openSelect(state){ // 中心层关闭打开控制
if (state == 1 )
{
document.body.scrollTop = document.body.scrollTop - 100 ;

document.getElementById( " jubaodiv " ).style.display = " block " ;
document.getElementById( " jubaodiv " ).style.left = (document.getElementById( " bg " ).offsetWidth - document.getElementById( " jubaodiv " ).offsetWidth) / 2 + " px " ;
document.getElementById( " jubaodiv " ).style.top = document.body.scrollTop + 100 + " px " ;
document.getElementById( " jubaodiv " ).style.position = " absolute " ;
document.getElementById( " jubaodiv " ).style.zIndex = " 200000000 " ;
}
else
{
document.getElementById( " jubaodiv " ).style.display = " none " ;
}
}

// 获取页面实际大小
function getPageSize(type){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
// arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
if (type == 1 )
{
return pageHeight;
}
if (type == 2 )
{
return pageWidth;
}
}

/* 鼠标拖动 */
var oDrag = "" ;
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
var e = e ? e : event ;
var mouseD = document.all ? 1 : 0 ;
if (e.button == mouseD)
{
oDrag = o.parentNode;
ox = e.clientX;
oy = e.clientY;
}
}
function dragPro(e){
if (oDrag != "" )
{
var e = e ? e : event ;
dx = parseInt(document.getElementById( " jubaodiv " ).style.left);
dy = parseInt(document.getElementById( " jubaodiv " ).style.top);
// dx = document.getElementById(oDrag).document.offsetLeft;
// dy = document.getElementById(oDrag).offsetTop;
nx = e.clientX;
ny = e.clientY;
document.getElementById( " jubaodiv " ).style.left = (dx + ( nx - ox )) + " px " ;
document.getElementById( " jubaodiv " ).style.top = (dy + ( ny - oy )) + " px " ;
ox = nx;
oy = ny;
}
}
document.onmouseup = function(){oDrag = "" ;}
document.onmousemove = function( event ){dragPro( event );}

 

代码

< style >

#bg{background:#CCC;filter:alpha(opacity = 70 );
</ style >

< form method = " post " runat = " server " id = " form1 " >
< div id = " bg " style = "" >
< table id = " jubaodiv " style = " border:3px solid #f7d772;background-color:#fff;display:none; width:605px; height:305px; cursor:move; " onmousedown = " drag(event,this) " >
< tr > ..... </ tr ></ table >


< a onclick = " openBg(1);openSelect(1) " onmousemove = " this.style.cursor='pointer' " style = " color:Red " > 举报该用户 </ a >

 

3：多个div显现与隐藏，来源与58网站发布页

代码

< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< style >

#pMain{width:940px; margin: 0 auto; text - align:left; padding:12px 10px; border:1px solid #e7e8e9;}
#pContent{ margin - top:20px;min - height:400px; height:300px;}
.p - tab{ float :left; width:120px; height:33px; line - height:33px; text - indent:8px; padding - right:340px ! important; padding - right:330px;}
.p - tab a{ color:#9a4c02; font - size:14px; width:120px;}

.p - submnu{ position:absolute; background: #f9f9f9 url() no - repeat; top: - 1px; left:120px;}
.p - submnu{ z - index: 9999 ; width:340px; border:1px solid #e7e8e9; border - left:none; display:none;}
.p - submnu li{ width:165px; height:33px; line - height:33px; float :left;}
.p - submnu li a{ color:#00C; width:150px; text - decoration:none; font - weight:normal;}
.p - submnu li a:hover{ text - decoration:underline; color:#f00}

.current{ float :left; background - color:#f9f9f9; width:120px; height:31px; border:1px solid #e7e8e9; }
.current{ line - height:31px; text - indent:6px;padding - right:334px ! important; padding - right:326px; position:relative; margin - right:4px;}
.current a{ color:#ff3e00; text - decoration:underline;font - size:14px; font - weight:bold; width:120px;}
.current .p - submnu li a{ color:#ff3e00; text - decoration:none; font - weight:normal;}
.current .p - submnu li a:hover{ text - decoration:underline; color:#ff3e00}
.current a.over{ color:# 000 ; text - decoration:none; cursor:auto}

</ style >
</ HEAD >

< BODY >

< div id = " pContent " >
< ul >

< li class = " p-tab " >< a href = " # " > 房屋信息 </ a >
< ul class = " p-submnu " >
< li >< a href = " # " > 房屋出租 </ a ></ li >

</ ul >
</ li >
< li class = " p-tab " >< a href = " # " > 商用房 </ a >
< ul class = " p-submnu " >
< li >< a href = " # " > 餐饮娱乐 </ a ></ li >
</ ul >
</ li >
< li class = " p-tab " >< a href = " # " > 婚恋交友 </ a >
< ul class = " p-submnu " >
< li >< a href = " # " > 男士征婚 </ a ></ li >
</ ul >
</ li >
</ ul >< div class = " c " ></ div >
</ div >

< script language = " javascript " type = " text/javascript " >
function $(objname) { return document.getElementById(objname); }
var topCurrentli;
function nav_over(D) {
if (topCurrentli != null ) {
D.style.top = topCurrentli;
}
}
var obj = $( " pContent " ).getElementsByTagName( " li " );
for (var i = 0 ; i < obj.length; i ++ ) {
obj[i].onmouseover = function() {
if ( this .getElementsByTagName( " ul " ).length > 0 ) {
this .className = " current " ;
topCurrentli = this .style.top;
this .getElementsByTagName( " ul " )[ 0 ].style.display = " block " ;

nav_over( this .getElementsByTagName( " ul " )[ 0 ]);
}
}
obj[i].onmouseout = function() {
if ( this .getElementsByTagName( " ul " ).length > 0 ) {
this .className = " p-tab " ;
this .getElementsByTagName( " ul " )[ 0 ].style.display = " none " ;
}
}
}
</ script >


</ BODY >
</ HTML >

4：滑动门

 

    此类型简单，目前没有具体代码，用到的时候再说吧。

转载于:https://www.cnblogs.com/ydx2020/archive/2010/06/06/1752801.html