js有alert，prompt和confirm对话框，不过不是很美体验也不是很好，用jQuery也能实现，

体验效果：http://hovertree.com/texiao/jquery/34/

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>炫酷的jQuery对话框插件 gDialog - 何问起</title><base target="_blank" />

    <link href="http://hovertree.com/texiao/jquery/34/css/normalize.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/animate.min.css">

    <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/jquery.gDialog.css">

    <style>

        button {

            border: 0;

        }

        .container {

            margin: 50px auto;

            max-width: 728px;

            text-align: center;

            font-family: Arial;

        }

        .btn {

            background-color: #ED5565;

            color: #fff;

            padding: 20px;

            margin: 10px 30px;

            border-radius: 5px;

            border-bottom: 3px solid #DA4453;

        }a{color:darkslateblue;}

    </style>

</head>

<body>

    <div style="width:310px;margin:0px auto;">

    <a href="http://hovertree.com/">首页</a>

    <a href="http://hovertree.com/texiao/">特效</a>

    <a href="http://hovertree.com/h/bjaf/4132lshc.htm">原文</a></div>

    <div class="container">

        <h1>jQuery gDialog Plugin Exampels</h1>

        <button class="btn demo-1">Alert对话框</button>

        <button class="btn demo-2">Prompt对话框</button>

        <button class="btn demo-3">Prompt对话框</button>

    </div>

        <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>

        <script src="http://hovertree.com/texiao/jquery/34/js/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对话框 by 何问起",

                    animateIn: "bounceIn",

                    animateOut: "bounceOut"

                });

            });

            $('.demo-2').click(function () {

                $.gDialog.prompt("Your website", "hovertree.com", {

                    title: "Prompt对话框 by 何问起",

                    required: true,

                    animateIn: "rollIn",

                    animateOut: "rollOut"

                });

            });

            $('.demo-3').click(function () {

                $.gDialog.confirm("Are You Sure?", {

                    title: "Confirm对话框 by 何问起",

                    animateIn: "bounceInDown",

                    animateOut: "bounceOutUp"

                });

            });

        </script>

</body>

</html>

js题目:http://hovertree.com/tiku/bjaf/k44bgls5.htm

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html

炫酷的jQuery对话框插gDialog的更多相关文章

  1. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  2. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  3. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

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

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

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

    jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...

  6. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  7. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  8. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  9. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

随机推荐

  1. 2003-Can't connect to mysql server on localhost (10061)

    mysql数据库出现2003-Can't connect to mysql server on localhost (10061)问题 解决办法:查看wampserver服务器是否启动,如果没有启动启 ...

  2. MongoDB学习笔记三—增删改文档上

    插入insert 单条插入 > db.foo.insert({"bar":"baz"}) WriteResult({ }) 批量插入 > db.fo ...

  3. 搭建个人wordpress博客（小白教程）

    新浪sae平台现在是有个免费个人空间使用,现在,教您如何使用该平台搭建属于自己的个人网站,本教程以wordpress程序安装包搭建个人网站. 申请新浪云账号 如果我们使用SAE新浪云计算平台作为服务器 ...

  4. Java中的进程与线程（总结篇）

    详细文档: Java中的进程与线程.rar 474KB 1/7/2017 6:21:15 PM 概述: 几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进 ...

  5. 解决Windows 8.1中所有的应用(Modern App)无法打开（闪退）的问题

    我已经在3台电脑上遇到这个问题了,症状是,所有应用商店安装的App都无法打开,包括应用商店本身,在开始界面点击应用以后,应用的Logo一闪而过,然后就消失了,回到了开始界面.查看系统应用日志,会有这样 ...

  6. EasyPR--中文开源车牌识别系统 开发详解（1）

    在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao123 ...

  7. ABP源码分析十四：Entity的设计

    IEntity<TPrimaryKey>: 封装了PrimaryKey:Id,这是一个泛型类型 IEntity: 封装了PrimaryKey:Id,这是一个int类型 Entity< ...

  8. Entity Framework 6 Recipes 2nd Edition（12-3）译 -> 数据库连接日志

    12-3. 数据库连接日志 问题 你想为每次与数据库的连接和断开记录日志 解决方案 EF为DbContext的连接公开了一个StateChange 事件.我们需要处理这个事件, 为每次与数据库的连接和 ...

  9. 游戏编程系列[1]--游戏编程中RPC协议的使用[2]--Aop PostSharp篇

    上一篇我们使用了一个通用JSON协议约定来进行达到远程调用的目的.但是从实现上,我们需要不断的在所有的方法上添加拦截,并且判断拦截,然后执行,这就达到了一个比较繁琐的目的. 之前我们尝试过使用代码生成 ...

  10. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...