这样的弹出窗口要怎么做

jhl_hong 2010-01-30 10:55:37
这样的弹出窗口要怎么做？
这种的弹出窗口?
...全文
160 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
段传涛 2010-02-01
  • 打赏
  • 举报
 回复
问题1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ----- popup_mousedown -------------------------------------------------------
function popup_mousedown(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
if ( ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
// ----- popup_mousemove -------------------------------------------------------
function popup_mousemove(e)
{
if (!popup_dragging) return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ----- popup_mouseup ---------------------------------------------------------
function popup_mouseup(e)
{
if (!popup_dragging) return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else document.onmousedown = popup_oldfunction;
}
// ----- popup_exit ------------------------------------------------------------
function popup_exit(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
// ----- popup_show ------------------------------------------------------------
function popup_show()
{
element = document.getElementById('popup');
drag_element = document.getElementById('popup_drag');
exit_element = document.getElementById('popup_exit');
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+'px';
drag_element['target'] = 'popup';
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
// ----- popup_mousepos --------------------------------------------------------
function popup_mousepos(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ----- Attach Events ---------------------------------------------------------
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/* <style> */
div.sample_popup { z-index: +1; }
div.menu_form_header{
cursor:move
}
div.sample_popup div.menu_form_header
{
border: 1px solid black;
border-bottom: 0px;
cursor: default;
width: 200px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e26d3e50d0d8b886020abTHgvNiRn8J0.png') no

-repeat;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
font-size: 13px;
color: #206040;
}
div.sample_popup div.menu_form_body
{
border: 1px solid black;
width: 200px;
background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e45dd0be648898799dacqSVztsCDIfid.png') no

-repeat left bottom;
}
div.sample_popup img.menu_form_exit
{
float: right;
margin: 4px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup table
{
border-collapse: collapse;
width: 100%;
}
div.sample_popup th
{
width: 1%;
padding: 0px 5px 1px 0px;
text-align: left;
font-family: "Times New Roman", Serif;
font-weight: 900;
font-size: 13px;
color: #004060;
}
div.sample_popup td
{
width: 99%;
padding: 0px 0px 1px 0px;
}
div.sample_popup form
{
margin: 0px;
padding: 8px 10px 10px 10px;
}
div.sample_popup input.field
{
border: 1px solid #808080;
width: 95%;
font-family: Arial, Sans-Serif;
font-size: 12px;
}
div.sample_popup input.btn
{
margin-top: 2px;
border: 1px solid #808080;
background-color: #DDFFDD;
font-family: Verdana, Sans-Serif;
font-size: 11px;
}
a {
color: #FF0000;
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" onclick="popup_show()" value='登录'/>
<div class="sample_popup" id="popup" style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit"

src="http://bbs.blueidea.com/attachments/2007/7/11/20070711_45970b8e6254b86494b4cIUp1bV26gbe.png" />
Login
</div>
<div class="menu_form_body">
<form method="post" action="">
<table>
<tr>
<th>Username:</th>
<td><input class="field" type="text" onfocus="select();" /></td>
</tr>
<tr>
<th>Password:</th>
<td><input class="field" type="password" onfocus="select();" /></td>
</tr>
<tr>
<th> </th>
<td><input class="btn" type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
段传涛 2010-02-01
  • 打赏
  • 举报
 回复
问题2 答
<html>
<head>
<title></title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:16px solid orange;background-color:white;z-index:1002;overflow:auto;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a>
<div id="light" class="white_content">
窗口内容
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
ck11926375 2010-02-01
  • 打赏
  • 举报
 回复 


<title>www.aspxhome.com</title>

<style type="text/css">

#divPageMask{background-color:#000000; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}

#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:-300px;z-index:50; width:300px;height:150px}

</style>

<div id="divPageMask"></div>

<div id="divOpenWin"><center><a href="javascript:Close();">关闭</a>

<div id="DivInfo">请认真阅读本发帖说明 (15 秒后自动关闭)</div></center></div>

<script language="javascript">

function $(id){return document.getElementById(id);}

function Open()

{   sDisp(0);  

   $("divPageMask").style.display="block";

   resizeMask();

   window.onResize = resizeMask;

   $("divOpenWin").style.display="block";

}

function Close()

{   sDisp(1);

   divPageMask.style.width = "0px";

   divPageMask.style.height = "0px";

   divOpenWin.style.top = "-300px";

   window.onResize = null;

}

function resizeMask()

{

divPageMask.style.width = document.body.scrollWidth;

divPageMask.style.height = document.body.scrollHeight>document.body.clientHeight?document.body.scrollHeight:document.body.clientHeight;

divOpenWin.style.left = (document.body.offsetWidth - divOpenWin.offsetWidth) / 2;

divOpenWin.style.top = (document.body.offsetHeight - divOpenWin.offsetHeight) / 2;

}

function sDisp(val)

{var dispalyType;

   var dType=["hidden","visible"];

   var obj=document.getElementsByTagName("select");

   for (i=0;i<obj.length;i++)

   {

     obj[i].style.visibility=dType[val];

   }

}

Open();

var secs = 15;

for(i=1;i<=secs;i++) {window.setTimeout("update(" + i + ")",  i*1000);}

function update(num) {

if(num == secs) {Close();}

else {

printnr = secs-num;

$("DivInfo").innerHTML = "遮罩层"+printnr+"后关闭";

}

}

</script>
灵雨飘零 2010-02-01
  • 打赏
  • 举报
 回复
接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！接分，

帮顶！！！
灵雨飘零 2010-02-01
  • 打赏
  • 举报
 回复
接分，

帮顶！！！
灵雨飘零 2010-02-01
  • 打赏
  • 举报
 回复
用Ajax的ModalPopup控件！

或者用js + css+ div也可以搞定的。。


seesea125 2010-02-01
  • 打赏
  • 举报
 回复
用jquery插件，jmodel，blockui，thickbox，facebox。。。都很好用，不用自己写
水猿兵团五哥 2010-02-01
  • 打赏
  • 举报
 回复
放在winform中，我会告诉你做两个窗体
一个全屏背景，一个提示窗体，很简单
messi_yang 2010-02-01
  • 打赏
  • 举报
 回复
js + css+ div也可以搞定的。。
fs822 2010-02-01
  • 打赏
  • 举报
 回复
这个叫做AJAX么？
湖中仙人 2010-02-01
  • 打赏
  • 举报
 回复
用一个窗体在合适的地方调出就行了；
zhujiazhi 2010-01-31
  • 打赏
  • 举报
 回复
其实就是两个DIV，一个当做遮照，一个用来显示，
两个的postion都是相对的
遮照宽度和高度都是100%的，显示的DIV放到屏幕的中间的
用js + css+ div可以搞定的，

http://www.cnblogs.com/wjfluisfigo/archive/2009/01/15/1359309.html
段传涛 2010-01-30
  • 打赏
  • 举报
 回复
我的用js做的 ，如果明天不结贴 ，明天再说吧。 晚安
tmoonlight 2010-01-30
  • 打赏
  • 举报
 回复
直接用html+css就能做了，首先控制这个窗口的display属性。隐藏的时候设置xx.style.display=none 弹出来就用xx.style.display=""
这个窗口设计方面有两个难点：一个是位置，一个是它的阴影效果。
1.位置：左右居中直接用center就可以，上下居中可以用脚本 或者直接不居中设置一个marin-top的值就行。
2.阴影效果:套两个div 里面div不变。外面的div加半透明背景，位置设置成相对，平移几个效果。
希望lz能根据我的提示写出自己的代码
Android自定义控件，自定义二级弹出菜单
我们在常用的电商或者旅游APP中，例如美团，手机淘宝等等，都能够看的到有那种下拉式的二级列表菜单。自定义二级菜单。
怎么用jQuery做弹出窗口
用jQuery做弹出窗口的方法：首先设置button标签的id为mybutton；然后通过id获得button对象，给它绑定click点击事件；最后当按钮被点击时，使用【confirm()】方法弹出对话框。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 推荐：jquery视频教程 用jQuery做弹出窗口的方法： 1、新建一个html文件，命名为test.html，用于讲解怎样使用jquery弹出对话框。 2、在test.html文件内，使用button标签创
mvc弹出窗口网页窗口_在网页设计中使用弹出窗口（模式）的最佳方法
在本教程中，我们将介绍Web设计中的弹出窗口（模式）。 在设计中使用弹出窗口需要承担一定的责任。 如果粗心地做，添加弹出窗口可能会破坏用户体验。 但是，如果实施得当，它们可能是一个非常有用的工具。 让我们看一下弹出窗口的一些典型示例，研究为什么用户和设计人员可能会如此不喜欢它们，为什么某些用户选择安装弹出窗口阻止程序，以及使它们正常工作的一些最佳实践。 Web设计弹出窗口的最佳做法 请...
威纶通触摸屏制作自定义弹出窗口的具体方法（3种）
威纶通触摸屏制作自定义弹出窗口的具体方法（3种）
WPF如何弹出窗口
Title: WPF如何弹出窗口 Author:Kagula Date:2013-12-09 LastUpdateDate: 2020-02-11 测试环境: [1]VS2010SP1, VS2019 Community [2]WPF(.NET Framework 4)项目, .Net Core3.1 内容简介 WPF工程如何弹出自定义窗口 第一步：自定义个窗口 为当前...
VB

16,556

社区成员

110,528

社区内容

发帖
与我相关
我的任务
社区描述
VB技术相关讨论，主要为经典vb，即VB6.0
社区管理员
  • VB.NET
  • 水哥阿乐
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章