一个不错的js对话框代码
最近找到一个用于web前端的对话框,能替换掉浏览器的alert,confirm,和prompt.
效果如下:
主要用到一个js文件 dialog.js
使用方法有三种
1. 设定内容为url
var addPop = new Popup({contentType:1,isReloadOnClose:false,width:450,height:300}); addPop.color = {cColor:"#EEEEEE", bColor:"#FFFFFF", tColor:"#709CD2", wColor:"#FFFFFF"}; addPop.setContent("contentUrl","album/addAlbum.jsp"); addPop.setContent("title","创建新的相册"); addPop.build(); addPop.show(); //contentTye为对话框的种类,为1时对话框建在了iframe中,
album/addAlbum.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'addAlbum.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
相册名称:<input type="text"><br>
<input type="button" value="添加">
</body>
</html>
效果
2。直接设定内容
var noticePop = new Popup({contentType:2,isReloadOnClose:false,width:400,height:100}); noticePop.color = {cColor:"#EEEEEE", bColor:"#FFFFFF", tColor:"#709CD2", wColor:"#FFFFFF"}; noticePop.setContent("title","提示"); noticePop.setContent("contentHtml","<div style='margin:15px;'>目前您的相册中还没有照片,快来体验超大容量、快速上传的百度空间相册服务吧。立即上传喜欢的图片,展示丰富多彩的生活。<br><br><input type=\"button\" value='上传相片'></div>"); noticePop.build(); noticePop.show();
可以结合ajax一起使用
3. 相当于window.confirm()
function deleteCategory(id){ pop=new Popup({ contentType:3,isReloadOnClose:false,width:395,height:80}); pop.setContent("title","删除分类"); pop.setContent("confirmCon","您确定要删除?删除后该分类下的文章将移至默认分类下"); pop.setContent("callBack",delCallback_pop); pop.setContent("parameter",{fid:"deletecatform",index:id,popup:pop}); pop.setContent("overlay",1); pop.build(); pop.show(); } function delCallback_pop(para){ pop.close(); //关闭对话框 var index = para["index"];取得参数 }