炫酷jQuery自定义对话框插件jDialog_jDialog弹出对话框和确认对话框插件
2014-09-19 13:48:09  By: dwtedx

多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件

在项目开发中、一般会美化 alert(); 的样式、那么今天我就和大家分享一款非常炫的插件

先来看一下程序最后的效果图片吧

下面是HTMl代码

<center>
<button id="test1">alert方式调用</button>
<br/><br/>
<button id="test2">confirm方式调用</button>
<br/><br/>
<button id="test3">iframe方式调用</button>
<br/><br/>
<button id="test4">只显示内容对话框</button>
<br/><br/>
<button id="test5">对话框配置按钮</button>
<br/><br/>
<button id="test6">message方式调用</button>
<br/><br/>
<button id="test7">tip方式调用</button>
</center>
以下是JS代码

$("#test1").click(function(){
	var dialog = jDialog.alert(´欢迎使用jDialog组件,我是alert!´,{},{
	showShadow: false,// 不显示对话框阴影
	buttonAlign : ´center´,
	events : {
		show : function(evt){
			var dlg = evt.data.dialog;
		},
		close : function(evt){
			var dlg = evt.data.dialog;
		},
		enterKey : function(evt){
			alert(´enter key pressed!´);
		},
		escKey : function(evt){
			alert(´esc key pressed!´);
			evt.data.dialog.close();
		}
	}
  });
}) ; 

$("#test2").click(function(){
	var dialog = jDialog.confirm(´欢迎使用jDialog组件,我是confirm!´,{
		handler : function(button,dialog) {
			alert(´你点击了确定!´);
			dialog.close();
		}
	},{
		handler : function(button,dialog) {
			alert(´你点击了取消!´);
			dialog.close();
		}
	});
});

$("#test3").click(function(){
	// 通过options参数,控制iframe对话框
	var dialog = jDialog.iframe(´http://dwtedx.com/´,{
		title : ´代码编辑器 - dwtedx个人博客´,
		width : 1100,
		height : 550
	});
});

$("#test4").click(function(){
	// 通过options参数,控制dialog
	var dialog = jDialog.dialog({
		title : ´自定义对话框´,
		content : ´大家好,欢迎访问dwtedx个人博客。´
	});
});

$("#test5").click(function(){
	// 通过options参数,控制dialog
	var dialog = jDialog.dialog({
		title : ´自定义对话框´,
		content : ´大家好,我是jDialog.dialog!´,
		buttons : [
			{
				type : ´highlight´,
				text : ´你好´,
				handler:function(button,dialog)
				{
					dialog.close();
				}
			}
		]
	});	
});

$("#test6").click(function(){
	var dialog = jDialog.message(´大家好,欢迎访问dwtedx个人博客´,{
		autoClose : 3000,    // 3s后自动关闭
		padding : ´30px´,    // 设置内部padding
		modal: true         // 非模态,即不显示遮罩层
	});
});

$("#test7").click(function(){
	var dialog = jDialog.tip(´大家好,欢迎访问dwtedx个人博客´,{
		target : $(´#test7´),
		position : ´left-top´,
		trianglePosFromStart :0,
		autoClose : 1000,
		offset : {
			top :-20,
			left:10,
			right:0,
			bottom:0
		}
	});
});
当然、在这之前你必须引入相应的 JS 文件和 CSS 文件

那么相应的资源文件呢我已经上传到源代码里面了、大家可以直接下载哈

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1gdxgZh5 密码: lkpo

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+