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. 检查sql执行效率

    SELECT  SUBSTRING(ST.text, ( QS.statement_start_offset / 2 ) + 1,                    ( ( CASE statem ...

  2. TFS 生成配置

      生成  

  3. 机器指令翻译成 JavaScript —— No.6 深度优化

    第一篇 中我们曾提到,JavaScript 最终还得经过浏览器来解析.因此可以把一些优化工作,交给脚本引擎来完成. 现代浏览器的优化能力确实很强,但是,运行时的优化终归是有限的.如果能在事先实现,则可 ...

  4. Linux学习日记-EF6的安装升级(三)

    在vs2013中使用EF是5的但是如果想使用 “来自数据库据的Code First” 这个生成模板就会发现 它会提示你EF的版本太低请升级 下面就是解决办法: 安装实体框架6 在工具菜单中,点击NuG ...

  5. Mono产品生命周期

    软件生命周期 同任何事物一样,一个软件产品或软件系统也要经历孕育.诞生.成长.成熟.衰亡等阶段,一般称为软件生命周期(软件生存周期) .软件生命周期模型是指人们为开发更好的软件而归纳总结的软件生命周期 ...

  6. Fedora 22中的用户和用户组管理

    The control of users and groups is a core element of Fedora system administration. This chapter expl ...

  7. ztreeDeptSelect 基于jquery和ztree的部门选择插件

    插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...

  8. Hbase学习笔记01

    最近做项目接触到了HDFS.mapreduce以及Hbase,有了实战机会,今天打算将这些知识好好总结下,以备不时之需.首先从Hbase开始吧. Hbase是建立在HDFS上的分布式数据库,下图是Hb ...

  9. Kinect开发文章目录

    整理了一下去年为止到现在写的和翻译的Kinect的相关文章,方便大家查看.另外,最近京东上微软在搞活动, 微软 Kinect for Windows 京东十周年专供礼包 ,如果您想从事Kinect开发 ...

  10. C++ std::array

    std::array template < class T, size_t N > class array; Code Example #include <iostream> ...