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. linux-linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  2. Linux Socket 网络编程

    Linux下的网络编程指的是socket套接字编程,入门比较简单.在学校里学过一些皮毛,平时就是自学玩,没有见识过真正的socket编程大程序,比较遗憾.总感觉每次看的时候都有收获,但是每次看完了之后 ...

  3. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  4. ABP源码分析三十九：ABP.Hangfire

    ABP对HangFire的集成主要是通过实现IBackgroundJobManager接口的HangfireBackgroundJobManager类完成的. HangfireBackgroundJo ...

  5. springmvc的图片上传与导出显示

    1.前端文件上传需要在form表单内添加enctype="multipart/form-data" ,以二进制传递: 2.web.xml文件内配置 <servlet-mapp ...

  6. UIApplication和OpenUrl的基于使用方法

    UIApplication实用方法 前言: 本文介绍的方法每一个人在项目都应用过,只是有的时候容易忘记每次都要去百度.因为有些方法在整个项目中可能就只会写一次,基于此我只是做个笔记. 1. 每一个应用 ...

  7. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  8. JavaScript高级编程 (1) - javscript是什么

    <重温javascript>这是一系列 javascript 的学习笔记,部分内容摘自书本或者网络,我这里只是基于自己的理解进行了梳理整理. 一个完整的 javscript 实现是由以下3 ...

  9. 【转】c#、wpf 字符串，color，brush之间的转换

    转自:http://www.cnblogs.com/wj-love/archive/2012/09/14/2685281.html 1,将#3C3C3C 赋给background this.selec ...

  10. Ninesky源代码从Codeplex迁移到开源中国

    原来Ninesky代码一直发在Codeplex.com上,最近两三个星期了代码一直迁入不上去,网站访问也经常出错. 所以把代码放到开源中国去了,项目地址https://git.oschina.net/ ...