基于jQuery带动画的超炫酷弹出对话框

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入、上下抖动飞入等。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="container">
<h1>jQuery gDialog Plugin Exampels</h1>
<button class="btn demo-1">Alert Dialog Box</button>
<button class="btn demo-2">Prompt Dialog Box</button>
<button class="btn demo-3">Prompt Dialog Box</button>
</div>
<script src="src/jquery.js"></script>
<script src="src/jquery.gDialog.js"></script>
<script>
$(‘.demo-1‘).click(function(){
  $.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", {
    title: "Alert Dialog Box",
    animateIn: "bounceIn",
    animateOut: "bounceOut"
  });
});
$(‘.demo-2‘).click(function(){
  $.gDialog.prompt("站长素材", "sc.chinaz.com", {
    title: "Prompt Dialog Box",
    required: true,
    animateIn : "rollIn",
    animateOut: "rollOut"
  });
});
$(‘.demo-3‘).click(function(){
  $.gDialog.confirm("Are You Sure?", {
    title: "Confirm Dialog Box",
    animateIn : "bounceInDown",
    animateOut: "bounceOutUp"
  });
});
</script>

via:http://www.w2bc.com/article/90238

时间: 2024-10-11 22:24:21

基于jQuery带动画的超炫酷弹出对话框的相关文章

一款基于jquery超炫的弹出层提示消息

今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class='b'> </div> <div class='bb'> </div> <button id='go'> GO </button> <div class='message'> <div class

iOS开发——动画篇Swift篇&amp;炫酷弹出菜单

炫酷弹出菜单 这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu 这里改造成了Swift版,效果图如下: 使用代码: 1 import UIKit 2 3 class ViewController: UIViewController,HanggeSwiftMenuDelegate { 4 5 override func viewDidLoad() { 6 super

8个超炫酷仿HTML5动画源码

1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历还可以查看本年度的放假安排,功能非常强大.有兴趣的朋友可以下载学习. 在线演示 源码下载 2.CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果.页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改

超炫酷的jQuery/HTML5应用效果及源码

jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和jQuery的应用及其源码,一起来看看. HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真. 核心jQuery代码: $( document ).ready(function() { // Set canvas

8个超炫酷的jQuery相册插件欣赏

在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建自己的相册浏览系统,对那些JS功底不怎么好的同学应该会有不少帮助. 1.jQuery幻灯片播放器插件 可自动播放图片 之前我们分享过很多炫酷和实用的jQuery焦点图插件,比如jQuery仿Flash横向切换焦点图插件.今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切

3D HTML5 Logo标志 超炫酷旋转特效

今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标志在旋转的时候还有3D的视觉效果,这一切我们都是在canvas上实现的.具体演示和实现过程可以看下文. 你也可以在这里查看在线演示 下面我们来简单分析一下实现这款3D动画的过程及其部分核心代码,主要由HTML代码以及Javascript代码组成. HTML代码: <canvas id="can

iOS动画开发之五——炫酷的粒子效果

iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休闲游戏,那个有一个东西可以帮到你:iOS的粒子效果引擎. 一.粒子发射器 iOS中的粒子效果有两部分组成,一部分为发射器,设置例子发射的宏观属性,另一部分是粒子单元,用于设置相应的粒子属性.粒子发射器是基于Layer层,没错,又是Layer,他的全名叫做: CA

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

一款基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持.一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> Battle.net <b>style progress bar</b></h1> <div class="progress"> <b