一个不错的js对话框代码

skymr

浏览: 69566 次
性别:
来自: 重庆

最近访客更多访客>>

qianqi3

jason-sunny

nbhaoyuan

hai77dong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP 百度 CSS Ajax Cache

最近找到一个用于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"];取得参数

  
  	}