我想做一个动态网页,上面有一些按钮和链接文字,只要用户点击就弹出一个可拖动的小窗口提示用户输入信息,并提交信息,
弹出的小窗口显示的是 从服务器读取的一个用PHP返回的页面text.php,里面有一些表单,填完后将信息返回到服务器PHP脚本ceshi.php里,
我在论坛找了一段代码可是看不懂,请各位高手帮忙解释一下吧?请问我的网页怎样实现?
DIV+CSS实现的拖动+隐藏/显示效果+背景变暗 收藏
<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>
本代码为纯ASPX页面代码,不需要在CS后台代码改动。
style:Win1,title负责拖动、显/隐;face负责,背景变暗。
DIV :Win1,title负责拖动、显/隐;dialogBoxBG负责变暗。
JS function:SetNone()负责将两个DIV隐藏;SetView()负责将两个DIV展示。
StartDrag(),Drag(),负责拖动。
弹出的小窗口显示的是 从服务器读取的一个用PHP返回的页面text.php,里面有一些表单,填完后将信息返回到服务器PHP脚本ceshi.php里,
我在论坛找了一段代码可是看不懂,请各位高手帮忙解释一下吧?请问我的网页怎样实现?
DIV+CSS实现的拖动+隐藏/显示效果+背景变暗 收藏
<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>
本代码为纯ASPX页面代码,不需要在CS后台代码改动。
style:Win1,title负责拖动、显/隐;face负责,背景变暗。
DIV :Win1,title负责拖动、显/隐;dialogBoxBG负责变暗。
JS function:SetNone()负责将两个DIV隐藏;SetView()负责将两个DIV展示。
StartDrag(),Drag(),负责拖动。
你可以放一个div,也可以再多做一个页面,当用户点击的时候弹出来一个 模态 的页面就可以了啊