6种不同的jquery弹出框

来源:https://www.sucaihuo.com/js/2474.html 2017-07-20 05:58浏览(2047) 收藏

好用的jquery弹出框,有多个弹出提示框,多年珍藏,6种不同的jQuery弹出层效果(兼容主流浏览器),包括新窗口、对话框
6种不同的jquery弹出框
分类:悬浮层/弹出层 > 弹窗 难易:中级
查看演示 下载资源 下载积分: 20 积分
<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()" />
function zOpenD(){
	var diag = new Dialog("Diag1");
	diag.Width = 900;
	diag.Height = 400;
	diag.Title = "弹出窗口示例";
	diag.URL = "http://www.sucaihuo.com";
	diag.ShowMessageRow = true;
	diag.MessageTitle = "弹出窗口示例";
	diag.Message = "在这儿你可以对这个窗口的内容或功能作一些说明";
	diag.OKEvent = zAlert;//点击确定后调用的方法
	diag.show();
}
function zOpen(){
	var diag = new Dialog("Diag2");
	
	diag.Width = 900;
	diag.Height = 500;
	diag.Title = "弹出窗口示例";
	diag.URL = "http://www.sucaihuo.com";
	diag.OKEvent = zAlert;//点击确定后调用的方法
	diag.show();
}
function zOpenInner(){
	var diag = new Dialog("Diag3");
	diag.Width = 300;
	diag.Height = 100;
	diag.Title = "弹出窗口示例";
	diag.innerHTML='<div style="text-align:center">直接输出html,使用dialog.<b>innerHTML</b>。</div>'
	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('警告:您确认要XXOO吗?',function(){Dialog.alert("yeah,周末到了,正是好时候");});
}
标签: 弹出层iframe
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2