炫酷JQUERY自定义对话框插件JDIALOG_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 : ´大家好,欢迎访问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
炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件的更多相关文章
- EasyUI Dialog 对话框默认不弹出和关闭清空对话框内容
EasyUI中文网: http://www.jeasyui.net/plugins/181.html 默认不弹出:closed:true 模式化窗口(有遮罩):modal:true <div c ...
- jQuery Colorbox是一款弹出层
jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...
- Bootstrap-Plugin:弹出框(Popover)插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- Unity3D 解决用Unity导出的Android工程在6.0及以上设备会弹出一串权限对话框的问题
解决用Unity导出的Android工程在6.0及以上设备会弹出一串权限对话框的问题 <meta-data android:name="unityplayer.SkipPermissi ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)
一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...
- C# ie通过打印控件点打印,总是弹出另存为xps的对话框
用的是lodop打印控件,点打印后,总是弹出另存为xps的对话框,后来在网上查到可能是把windows自带的Microsoft XPS Document Writer设为默认打印机的原因. 但现在没有 ...
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
随机推荐
- Java部分总结图片版(已经加上原图链接下载!!!)
Java基础知识图片版(原图下载链接)
- Monyer's Game 11~15关过关方法
到目前为止,玩这个小游戏并过关的人数已经达到了81人,首先Monyer要感谢各位的捧场与支持.继续上次的<Monyer's Game 6~10关过关方法>,我们来看剩下几关的过关方法. 但 ...
- 分享git的常用命令
Git操作笔记 1.创建目录 $ mkdir learngit $ cd learngit 2.把新建的目录变成仓库 $ git ...
- Centos 源配置 163,epel,mysql
http://mirrors.163.com/.help/centos.html CentOS7-Base-163.repo # CentOS-Base.repo # # The mirror sys ...
- html页面识别当前系统和语言
项目中需要一个下载功能,根据系统跳转到不同的页面,如iphone跳转到IOS页面,android跳转到android页面. 下面为页面判断页面: <!DOCTYPE HTML> <h ...
- 被废弃的 Thread.stop, Thread.suspend, Thread.resume 和Runtime.runFinalizersOnExit
最近学习多线程的知识,看到API里说这些方法被废弃了,就查了一下原因 Thread.stop 这个方法会解除被加锁的对象的锁,因而可能造成这些对象处于不一致的状态,而且这个方法造成的ThreadDea ...
- SQL将用户表中已存在的数据所有姓名(汉字)转换为拼音首字母
实现方法: --函数 Create function [dbo].[fn_GetPy](@str nvarchar(4000)) returns nvarchar(4000) --用于加密 --WIT ...
- kvm解决1000M网卡问题
1.当我们安装完虚拟机, 发现虚拟机竟然是 100M 网络, 传输速率很低, 那是怎么导致的呢,如何来解决呢? 需要我们修改 vm01.xml 配置文件网卡段,添加如下红色标记行,改 为 e1000, ...
- [转]Android输出Log到文件
前言:开发中遇到mx4这款机型Eclipse联调不上,logcat看不了,需要输出生成文件查看调试信息.网上搜了下,功能很完善了.startService和过滤输出信息需要自己添加设置,另外注意添加权 ...
- [转]10个学习Android开发的网站推荐
本文转自:http://blog.csdn.net/i_lovefish/article/details/43950893 1. Android Developers 作为一个Android开发者,官 ...