html怎样实现这样的效果?

发布网友发布时间：2022-04-23 13:05

共4个回答

热心网友时间：2022-04-23 14:34

我给你一个示例，以下内容为HTML源码，其实原理倒是不难的，要做一个遮罩层，触发时背景变暗。
style：Win1,title负责拖动、显/隐；face负责，背景变暗。
DIV ：Win1,title负责拖动、显/隐；dialogBoxBG负责变暗。
JS function：SetNone()负责将两个DIV隐藏；SetView()负责将两个DIV展示。
StartDrag(),Drag(),负责拖动。

源码如下：
<html>
<head>
<style>
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;z-index:20000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}
.face{position:absolute;top:0px;left:0px;width:1000px;height:730px;z-index:19000;filter: alpha(opacity=50);background-color:transparent!important;background-color:#eee;}
</style>
</head>

<input type="button" ID="Button2" runat="server" value="打开" onclick ="SetView();return false;"/><br />

<div id="dialogBoxBG" class="face"></div>

<div id="win1" style="background-color: #ffffff;">
<div class="title" onmousedown="StartDrag(this)" onmouseup="StopDrag(this)" onmousemove="Drag(this)" id="HEB">窗口</div>

这是窗口里的内容。这个窗体是可以拖动的噢。
<input type="text" id="Textbox1" />
<input type="button" ID="Button3" value="关闭" onclick ="SetNone();return false;" />
</div>

这是一个什么样的故事啊?

<script language="javascript" type="text/javascript">
//dialogBoxBG.style.height = document.body.scrollHeight;
SetNone();

function SetNone()
{
win1.style.display="none";
dialogBoxBG.style.display="none";

}
function SetView()
{

win1.style.display="";
dialogBoxBG.style.display="";
}

var move=false;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
obj.setCapture();
obj.style.background="#999";
move=true;
}
}

function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}

}

function StopDrag(obj)
{
obj.style.background="#000";
obj.releaseCapture();
move=false;
}
</script>

</html>

热心网友时间：2022-04-23 15:52

这个单纯用HTML是做不出来的，你想做这种效果去学下CSS吧，CSS可以实现各种你想要的效果，不过不是学完CSS就能做到弹出窗口的，只能做出这种界面而已，真正做到能弹出的还要学javascript

热心网友时间：2022-04-23 17:27

一个弹出层,是用js做的.推荐jquery的一个插件ThickBox

热心网友时间：2022-04-23 19:18

DIV+JS