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. Object是什么

    Object是什么 .Net程序员们每天都在和Object在打交道如果你问一个.Net程序员什么是Object,他可能会信誓旦旦的告诉你"Object还不简单吗,就是所有类型的基类" ...

  2. EF里Guid类型数据的自增长、时间戳和复杂类型的用法

    通过前两章Lodging和Destination类的演示,大家肯定基本了解Code First是怎么玩的了,本章继续演示一些很实用的东西.文章的开头提示下:提供的demo为了后面演示效果,前面代码有些 ...

  3. 40个Java多线程问题总结

    前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行 ...

  4. UML类图（上）：类、继承和实现

    面向对象设计 对于一个程序员来说,在工作的开始阶段通常都是别人把东西设计好,你来做.伴随着个人的成长,这个过程将慢慢变成自己设计一部分功能来实现,自己实现.如果要自己设计,无论是给自己看,还是给别人看 ...

  5. （原创） alljoyn物联网实验之手机局域网控制设备

    AllJoyn开源物联网协议框架,官方描述是一个能够使连接设备之间进行互操作的通用软件框架和系统服务核心集,也是一个跨制造商来创建动态近端网络的软件应用.高通已经将该项目捐赠给了一个名为“AllSee ...

  6. TODO：这是一个我的自媒体

    TODO:这是一个我的自媒体 自媒体(外文名:We Media)又称"公民媒体"或"个人媒体",是指私人化.平民化.普泛化.自主化的传播者,以现代化.电子化的手 ...

  7. C++ std::forward_list

    std::forward_list template < class T, class Alloc = allocator > class forward_list; Forward li ...

  8. python装饰器

    今天看了装饰器的一些内容,感觉@修饰符还是挺抽象的. 装饰器就是在不用改变函数实现的情况下,附加的实现一些功能,比如打印日志信息等.需要主意的是装饰器本质是一个高阶函数,她可以返回一个函数. 装饰器需 ...

  9. ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1

    最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...

  10. salesforce 零基础学习（五十五）java通过SOAP方式定时访问某个文件然后插入到sObject中

    项目源码:https://github.com/zhangyueqidlmu/SOAP-Access-SFDC.git 项目背景:salesforce端相关数据需要其他系统提供,其他系统可以提供相关数 ...