炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

最新推荐文章于 2021-06-04 02:30:00 发布

转载最新推荐文章于 2021-06-04 02:30:00 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jxldjsn/p/5539005.html

文章标签：

#javascript #ViewUI

本文介绍了一款基于jQuery的轻量级自定义对话框插件jDialog，该插件能够替代默认的alert()对话框，并提供了多种对话框类型，如alert、confirm、iframe等。通过示例展示了如何使用jDialog来创建不同样式的对话框。

多种类型自定义对话框插件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