这个效果怎么做？？

hling 2008-12-08 02:17:24

象淘宝的按收藏按钮的时候，出来一个层，并且可以在层里再操作,这个效果怎么做？？用ajax,层吗

...全文

149 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

hling 2008-12-08

打赏
举报

是象yfqvip 的效果，现在得想办法用ajax加入数据

niitnanfeng 2008-12-08

打赏
举报

看不见。js+css能实现你说的那种情况。

满衣兄 2008-12-08

打赏
举报



<html>

<head>

<script>



var dragapproved=false

var minrestore=0  //该变量表示窗口目前的状态，0表示初始化状态，1表示最大化状态

var initialwidth,initialheight

//若Client浏览器为IE5.0以上版本的

var ie5=document.all&&document.getElementById

//若Client浏览器为NetsCape6。0版本以上的

var ns6=document.getElementById&&!document.all



function iecompattest(){

return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}



function drag_drop(e){

if (ie5&&dragapproved&&event.button==1){

document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"

document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"

document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"

}

}



function initializedrag(e){

offsetx=ie5? event.clientX : e.clientX

offsety=ie5? event.clientY : e.clientY

document.getElementById("dwindowcontent").style.display="none" //此句代码可不要

tempx=parseInt(document.getElementById("dwindow").style.left)

tempy=parseInt(document.getElementById("dwindow").style.top)



dragapproved=true

document.getElementById("dwindow").onmousemove=drag_drop

}



function loadwindow(width,height){

if (!ie5&&!ns6)  //若不为IE或Netscpae浏览器，则使用一般的Window.open进行弹出窗口处理

//window.open(url,"","width=width,height=height,scrollbars=1")

{

 

}

else{

document.getElementById("dwindow").style.display='';

document.getElementById("dwindow").style.width=initialwidth=width+"px";

document.getElementById("dwindow").style.height=initialheight=height+"px";

document.getElementById("dwindow").style.left="300px";

document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px";

//document.getElementById("cframe").src=url

}

}



function maximize(){

if (minrestore==0){

minrestore=1 //maximize window

document.getElementById("maxname").setAttribute("src","layout.png")

document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"

document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"

}

else{

minrestore=0 //restore window

document.getElementById("maxname").setAttribute("src","layout.png")

document.getElementById("dwindow").style.width=initialwidth

document.getElementById("dwindow").style.height=initialheight

}

document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"

document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"

}



function closeit(){

document.getElementById("dwindow").style.display="none"



}



function stopdrag(){

dragapproved=false;

document.getElementById("dwindow").onmousemove=null;

document.getElementById("dwindowcontent").style.display="" //extra

}



</script>

</head>



<body>



<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">

<div align="right" style="background-color:navy">

<img src="layout.png" id="maxname" onClick="maximize()">

<img src="icon_delete.gif" onClick="closeit()"></div>

<div id="dwindowcontent" style="height:100%">



</div>

</div>



<input type="button" value="弹出窗口" onclick='loadwindow(300,200);'>



</body>

</html>

这个是你要的，就是css不太好看，自己定义一个或者用上面的css换下。

hling 2008-12-08

打赏
举报

层出来的时候，页面的其它的功能还可以用

lsgy2008 2008-12-08

打赏
举报

顶学习

jiang_jiajia10 2008-12-08

打赏
举报

是弹出层遮罩么？

hling 2008-12-08

打赏
举报

满衣兄 2008-12-08

打赏
举报

[Quote=引用 4 楼 hling 的回复:]
看不到图片吗？？？
[/Quote]
看不到。

hling 2008-12-08

打赏
举报

看不到图片吗？？？

满衣兄 2008-12-08

打赏
举报

看不到图片。
什么样子的？遮罩吗？
例子（保存为html文件看到效果）：

<!-- saved from url=file://C:/Documents and Settings/yfq/桌面/弹出层窗口.html -->

<script>

window.onerror = new Function("return(false);")

</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<HTML><HEAD id=Head1><TITLE></TITLE>

<STYLE> .black_overlay { DISPLAY: none; Z-INDEX: 1001; FILTER: alpha(opacity=80); LEFT: 0%; WIDTH: 100%; POSITION: absolute; TOP: 0%; HEIGHT: 100%; BACKGROUND-COLOR: black; moz-opacity: 0.8; opacity: .80 }

	.white_content {FONT-SIZE:10PT; BORDER-RIGHT: orange 1px solid; PADDING-RIGHT: 16px; BORDER-TOP: orange 1px solid; DISPLAY: none; PADDING-LEFT: 16px; Z-INDEX: 1002; LEFT: 25%; PADDING-BOTTOM: 16px; OVERFLOW: auto; BORDER-LEFT: orange 1px solid; WIDTH: 50%; PADDING-TOP: 16px; BORDER-BOTTOM: orange 1px solid; POSITION: absolute; TOP: 25%; HEIGHT: 50%; BACKGROUND-COLOR: white }

	</STYLE>

</HEAD>



<BODY><!--StartFragment--><FORM id=form1>

<DIV></DIV><INPUT id=Button3 onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" type=button value=添加> 



<DIV class=white_content id=light style="DISPLAY: none">添加记录 <INPUT> <INPUT type=button value=保存></INPUT> <BR><A 

onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" 

href="javascript:void(0)">关闭</A></DIV>

<DIV class=black_overlay id=fade style="DISPLAY: none"></DIV></FORM><!--EndFragment--></BODY>

</HTML>

HDNGO 2008-12-08

打赏
举报

怎么又是QQ空间。。。

sy_binbin 2008-12-08

打赏
举报



<style>

 /* container */

 body {margin:0; padding:0; text-align:center; font-family:Verdana,"宋体"; font-size:12px; color:#333;}

 form,ul,ol,li,dl,dt,dd {margin:0; padding:0;}

 div{text-align:center; margin:0 auto; padding:0;}

 input{color:#333; font-size:12px; font-family:Arial;}

 ul,li{list-style:none;}

 img,a img {border-width:0;}

 /* opennav */

 .navigator_bg{position:absolute; width:100%; height:1000px; background-color:#234f74; filter:alpha(opacity=40); -moz-opacity:0.4;}

 #navigator, #xyeva{position:absolute; width:459px; height:281px; background-color:#fff; margin-left:-231px; padding:0px; z-index:99; top:100px; left:50%;}

 /*.tabborder {float:left; width:462px; height:285px;} */

 .tab {float:left; width:457px; height:279px; border: 1px solid #A5E3ED;} 

 .tabtitle{width:455px; height:28px; border:1px solid #FFF; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabTitleBg.jpg) repeat-x left top; color:#0079BC; font-size:14px; line-height:28px;}

 .tabtitle img{float:right; margin:7px 10px 0 0;}

 .tabcontent{width:457px; height:248px; border-top:1px solid #A5E3ED; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabContentBg.jpg) no-repeat left top;}

 .tabcontent ul{padding:20px 0; width:417px; margin-left:20px; *margin-left:0px; border-bottom:1px dotted #0079BC; text-align:left; line-height:20px; color:#0079BC;}

 .tabcontent li{padding:0 10px;}

 .tabcontent input{margin:0px 5px;}

 </style>

 <a href="#"   onclick="openEva();">弹出</a>

 <script language="javascript">

 function openEva(){

 var nav = new Navigator();

 nav.createWin();

 }

 var preObjects = null;

 var Navigator = function(id){

         this.id = id;

 };

 Navigator.initIndex = 0;

 Navigator.CONTAINER = "navigator";

 Navigator.prototype.createWin = function(){

         Mark.showHintDiv();

         var html = "";

         var container = document.createElement("DIV");

         container.id = Navigator.CONTAINER;

         html += "<div class='tabborder'>"

         html += "        <div class='tab'>"

         html += "                <div class='tabtitle'><ul><li style='float:left; padding-left:183px;'><strong>弹出框</strong></li><li style='float:right; width:20px;'><a href='javascript:Mark.close();'><img src='http://images.cnblogs.com/cnblogs_com/amwggyy504/TabTitleClose.jpg'></img></a></ul></div>"

         html += "                        <div class='tabcontent'>"

         html += "                                <ul><li>自定义显示的内容</li></ul>"

         html += "                                <ul><li>自定义显示的内容</li></ul>"

         html += "                        </div>"

         html += "                </div>"

         html += "</div>"

         container.innerHTML = html;

         document.body.appendChild(container);

 }

 /* 生成页面遮盖的方法 */

 function gernateDivBg(){

         var bg = document.createElement("DIV");

         document.documentElement.style.overflow = "hidden";

         with(bg.style){

                 position = "absolute";

                 top = "0px";

                 left = "0px";

                 width = document.documentElement.scrollWidth;

                 height = document.documentElement.scrollHeight;

         }

         return bg;

 };

 var Mark = new Object();

 Mark.showHintDiv = function(){

         var bg = gernateDivBg();

                 bg.id = Mark.id;

                 bg.className = "navigator_bg";

 

         document.body.appendChild(bg);

 }

 Mark.close = function(){

         if(document.getElementById(Mark.id)){

                 document.body.removeChild(document.getElementById(Mark.id));

         }        

         if(document.getElementById(Navigator.CONTAINER))

                 document.body.removeChild(document.getElementById(Navigator.CONTAINER));

         document.documentElement.style.overflowX= "hidden";

         document.documentElement.style.overflowY= "auto";

 };

 </script>