当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 漂亮的jquery提示效果(仿腾讯弹出层)

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

2018年10月19日  | 移动技术网IT编程  | 我要评论

漂亮的jquery提示效果(仿腾讯弹出层)代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
<meta http-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,p,q,iframe,form,h5{margin: 0;padding: 0;}
img,fieldset { border: none 0; }
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;}
p,p,table,th,td { font-size:1em; font-family:inherit; line-height:inherit;}
h5{ font-size:12px;}
</style>
<script type="text/javascript" src="dialog.js"></script>
<script type="text/javascript">
function zopend(){
var diag = new dialog("diag1");
diag.width = 900;
diag.height = 400;
diag.title = "弹出窗口示例";
diag.url = "https://www.html.org.cn/";
diag.showmessagerow = true;
diag.messagetitle = "弹出窗口示例";
diag.message = "在这儿你可以对这个窗口的内容或功能作一些说明";
diag.okevent = zalert;//点击确定后调用的方法
diag.show();
}
function zopen(){
var diag = new dialog("diag2");
diag.width = 900;
diag.height = 400;
diag.title = "弹出窗口示例";
diag.url = "https://www.html.org.cn/";
diag.okevent = zalert;//点击确定后调用的方法
diag.show();
}
function zopeninner(){
var diag = new dialog("diag3");
diag.width = 300;
diag.height = 100;
diag.title = "弹出窗口示例";
diag.innerhtml='<p style="text-align:center">直接输出html，使用dialog.<b>innerhtml</b>。</p>'
diag.okevent = function(){diag.close();};//点击确定后调用的方法
diag.show();
}
function zopenele(){
var diag = new dialog("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();
}
function zalert(){
dialog.alert("你点击了一个按钮");
}
function zconfirm(){
dialog.confirm('警告：？',function(){dialog.alert("");});
}
</script>
</head>
<body>
<h3 align="center"><a href="https://www.html.org.cn/"> </a></h3>
<p id="p1"></p>
<p> <input type="button" value="弹出新窗口" onclick="zopen()" /> <input type="button" value="弹出带说明的新窗口" onclick="zopend()" /> <input type="button" value="弹出信息提示对话框" onclick="zalert()" /> <input type="button" value="弹出选择对话框" onclick="zconfirm()" /> <input type="button" value="弹出内容为html代码" onclick="zopeninner()" /> <input type="button" value="弹出内容为本页面内的隐藏层" onclick="zopenele()" /></p>
<p id="p2"></p>
<p id="forlogin"><table width="100%" border="0" align="center" cellpadding="4" cellspacing="4" bordercolor="#666666">
<tr>
<td colspan="2" bgcolor="#eeeeee">用户登陆</td>
</tr>
<tr>
<td width="50" align="right">用户名</td>
<td>
<input type="text" id="username" /></td>
</tr>
<tr>
<td align="right">密　码</td>
<td>
<input type="text" id="userpwd" /> </td>
</tr>
</table></p>
<br/>
<script>sometext("p1",200);sometext("p2",200);</script>
</body>
</html>


效果图：
\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网