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. 【流量劫持】SSLStrip 的未来 —— HTTPS 前端劫持

    前言 在之前介绍的流量劫持文章里,曾提到一种『HTTPS 向下降级』的方案 -- 将页面中的 HTTPS 超链接全都替换成 HTTP 版本,让用户始终以明文的形式进行通信. 看到这,也许大家都会想到一 ...

  2. 在Linux（Ubuntu/openSUSE/CentOS）下配置ASP.NET（Apache + Mono）

    [题外话] 闲的无聊竟然想尝试测试自己做的项目在不同操作系统上的性能表现,所以决定试试在Linux上部署Apache和Mono的环境.由于平时很少接触Linux,所以从网上找了几篇文章(附在相关链接中 ...

  3. 如何安装一个优秀的BUG管理平台——真的是手把手教学！

    前言 就BUG管理而言,国内的禅道做得很不错,而且持续有更新.我们来看看如何从头到尾安装禅道,各位要注意的是,不是文章深或者浅,而是文章如何在遇到问题的时候,从什么途径和用什么方法解决问题的.现在发觉 ...

  4. Goodbye2014，Hello2015

    正如我在研发会议上说的,总结是为了更好的计划:而计划,则是让你做事有目标,有方向:有了目标和方向,你才能真正把事情做成! 总的来说2014年可以归纳为下图: 2014年总结 一年的活动,基本可以归纳为 ...

  5. 【Java并发编程实战】----- AQS(二)：获取锁、释放锁

    上篇博客稍微介绍了一下AQS,下面我们来关注下AQS的所获取和锁释放. AQS锁获取 AQS包含如下几个方法: acquire(int arg):以独占模式获取对象,忽略中断. acquireInte ...

  6. java -version 问题

    我把 JAVA_HOME 从8改成了 7 , 为什么还是 显示的8啊 ! E:\sv0\jars>java -version java version "1.8.0_111" ...

  7. node.js里npm install --save 与 npm install --save-dev 的区别

    在package.json可以看到一个放在package.json 的dependencies , 一个放在devDependencies里面. 目前找到的一些解答:真正跑在用户浏览器中的代码,比如j ...

  8. git 常见命令解析

    转载自http://www.rainkong.net/post/git-image.html 之前用的都是svn ,git还是要了解的,万一哪天要用了呢

  9. Notes:SVG(2)---各种常见图形

    1.矩形rect,指定rx,ry可以得到圆角矩形 <rect x="10" y="10" rx="10" ry="10&qu ...

  10. RAC 主库配置单实例ADG

    1.主库准备工作 2.物理备库准备工作 3.创建物理备库 写在前面: 最终实现环境:11.2.0.4版本 2节点RAC + 1节点DG 本文旨在弄清楚整个搭建过程中涉及到的基础概念: 本文安装maxi ...