提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

漂亮的jquery提示效果(仿腾讯弹出层)

jQuery腾讯 效果 提示 弹出 漂亮
2023-06-13 09:14:45 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>超漂亮的仿腾讯弹出层效果</title>
<style>
body{background:#ffffff;color:#444;}
a{color:#09d;text-decoration:none;border:0;background-color:transparent;}
body,div,q,iframe,form,h5{margin:0;padding:0;}
img,fieldset{border:none0;}
body,td,textarea{word-break:break-all;word-wrap:break-word;line-height:1.5;}
body,input,textarea,select,button{margin:0;font-size:12px;font-family:Tahoma,SimSun,sans-serif;}
div,p,table,th,td{font-size:1em;font-family:inherit;line-height:inherit;}
h5{font-size:12px;}
</style>
<scripttype="text/javascript"src="Dialog.js"></script>
<scripttype="text/javascript">
functionzOpenD(){
vardiag=newDialog("Diag1");
diag.Width=900;
diag.Height=400;
diag.Title="弹出窗口示例";
diag.URL="http://www.html.org.cn/";
diag.ShowMessageRow=true;
diag.MessageTitle="弹出窗口示例";
diag.Message="在这儿你可以对这个窗口的内容或功能作一些说明";
diag.OKEvent=zAlert;//点击确定后调用的方法
diag.show();
}
functionzOpen(){
vardiag=newDialog("Diag2");
diag.Width=900;
diag.Height=400;
diag.Title="弹出窗口示例";
diag.URL="http://www.html.org.cn/";
diag.OKEvent=zAlert;//点击确定后调用的方法
diag.show();
}
functionzOpenInner(){
vardiag=newDialog("Diag3");
diag.Width=300;
diag.Height=100;
diag.Title="弹出窗口示例";
diag.innerHTML="<divstyle="text-align:center">直接输出html，使用dialog.<b>innerHTML</b>。</div>"
diag.OKEvent=function(){diag.close();};//点击确定后调用的方法
diag.show();
}
functionzOpenEle(){
vardiag=newDialog("Diag4");
diag.Width=300;
diag.Height=100;
diag.Title="弹出窗口示例";
diag.innerElementId="forlogin"
diag.OKEvent=function(){$E.getTopLevelWindow().$("username").value||alert("用户名不能为空");$E.getTopLevelWindow().$("userpwd").value||alert("密码不能为空")};//点击确定后调用的方法
diag.show();
}
functionzAlert(){
Dialog.alert("你点击了一个按钮");
}
functionzConfirm(){
Dialog.confirm("警告：？",function(){Dialog.alert("");});
}
</script>
</head>
<body>
<h3align="center"><ahref="http://www.html.org.cn/"></a></h3>
<divid="div1"></div>
<p>  <inputtype="button"value="弹出新窗口"onclick="zOpen()"/> <inputtype="button"value="弹出带说明的新窗口"onclick="zOpenD()"/> <inputtype="button"value="弹出信息提示对话框"onclick="zAlert()"/> <inputtype="button"value="弹出选择对话框"onclick="zConfirm()"/> <inputtype="button"value="弹出内容为HTML代码"onclick="zOpenInner()"/> <inputtype="button"value="弹出内容为本页面内的隐藏层"onclick="zOpenEle()"/></p>
<divid="div2"></div>
<divid="forlogin"><tablewidth="100%"border="0"align="center"cellpadding="4"cellspacing="4"bordercolor="#666666">
<tr>
<tdcolspan="2"bgcolor="#eeeeee">用户登陆</td>
</tr>
<tr>
<tdwidth="50"align="right">用户名</td>
<td>
<inputtype="text"id="username"/></td>
</tr>
<tr>
<tdalign="right">密　码</td>
<td>
<inputtype="text"id="userpwd"/></td>
</tr>
</table></div>
<br/>
<script>sometext("div1",200);sometext("div2",200);</script>
</body>
</html>

效果图：

相关文章