<!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对话框</title><base target="_blank" />

<link href="http://files.cnblogs.com/files/caidupingblogs/normalize.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/animate.min.css">

<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.css">

<style>

button {

border: ;

}

.container {

margin: 50px auto;

max-width: 728px;

text-align: center;

font-family: Arial;

}

.btn {

background-color: #00B2EE;

color: #;

padding: 20px;

margin: 10px 30px;

border-radius: 5px;

border-bottom: 3px solid;

}

</style>

</head>

<body>

<div class="container">

<button class="btn demo-1">Alert Dialog</button>

<button class="btn demo-2">Prompt Dialog</button>

<button class="btn demo-3">Prompt Dialog</button>

</div>

<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.js"></script>

<script type="text/javascript">

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

$.gDialog.alert("http://www.cnblogs.com/caidupingblogs/", {

title: "Alert对话框",

animateIn: "bounceIn",

animateOut: "bounceOut"

});

});

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

$.gDialog.prompt("Your website", "http://www.cnblogs.com/caidupingblogs/", {

title: "Prompt对话框",

required: true,

animateIn : "rollIn",

animateOut: "rollOut"

});

});

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

$.gDialog.confirm("http://www.cnblogs.com/caidupingblogs/", {

title: "Confirm对话框",

animateIn : "bounceInDown",

animateOut: "bounceOutUp"

});

});

</script>

</body>

</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对话框</title><base target="_blank" />
<link href="http://files.cnblogs.com/files/caidupingblogs/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/animate.min.css">
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.css">
<style>
button {
border: 0;
}

.container {
margin: 50px auto;
max-width: 728px;
text-align: center;
font-family: Arial;
}

.btn {
background-color: #00B2EE;
color: #000000;
padding: 20px;
margin: 10px 30px;
border-radius: 5px;
border-bottom: 3px solid;
}
</style>

</head>

<body>
<div class="container">
<button class="btn demo-1">Alert Dialog</button>
<button class="btn demo-2">Prompt Dialog</button>
<button class="btn demo-3">Prompt Dialog</button>
</div>

<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery.gDialog.js"></script>
<script type="text/javascript">
$('.demo-1').click(function(){
$.gDialog.alert("http://www.cnblogs.com/caidupingblogs/", {
title: "Alert对话框",
animateIn: "bounceIn",
animateOut: "bounceOut"
});
});
$('.demo-2').click(function(){
$.gDialog.prompt("Your website", "http://www.cnblogs.com/caidupingblogs/", {
title: "Prompt对话框",
required: true,
animateIn : "rollIn",
animateOut: "rollOut"
});
});
$('.demo-3').click(function(){
$.gDialog.confirm("http://www.cnblogs.com/caidupingblogs/", {
title: "Confirm对话框",
animateIn : "bounceInDown",
animateOut: "bounceOutUp"
});
});
</script>
</body>

jQuery之对话框的更多相关文章

  1. jQuery cxDialog 对话框

    cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...

  2. jQuery UI 对话框（Dialog） - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  3. 15款基于 jQuery模态对话框

    在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...

  4. jquery自定义对话框alert、confirm和prompt

    jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...

  5. 解决jQuery UI 对话框兼容性问题

    默认情况下使用jQuery UI的对话框,在Chrome浏览器是没问题的,但是在IE里却会显示对话框,用户体验非常不好.改变一下div的属性即可. 原本是这样: <div id="di ...

  6. 使用CSS和jQuery实现对话框

    因为项目中要显示一些对话框,但用alert显得太丑,后从网上找了一些插件,但有觉得不好用,因此自己试用CSS和jQuery写了一个对话框,代码如下: <!DOCTYPE html> < ...

  7. 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

    多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...

  8. jQuery手机对话框插件

    最近,公司一直在做微网站之类的,一直在看别的微网站,发现一些对话框的样式很不错,所以自己就动手把样式剥离出来写成一个简单的插件,方便其他项目中使用到.废话不多说,上插件源码: /* *jQuery简单 ...

  9. jquery 模态对话框传值,删除,新增表格行

    个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. iOS－default.png启动图片

    我在xcode5下写的代码,我下载了iOS6的模拟器,我用iOS6和iOS7的模拟器切换运行,有的时候可以运行有的时候不可以运行,报错: 2013-11-17 16:49:04.049 sim[474 ...

  2. C#多线程(上) 分类： C# 线程 2015-03-09 10:35 174人阅读 评论(0) 收藏

    一.多线程的相关概念 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的. 什么是线程? 线程是程序中的一个执行 ...

  3. VS2015中DataGridView的DataGridViewComBoboxCell列值无效及数据绑定错误的解决方法

    在VS2015中练习DataGridView的使用, 发现其中的DataGridViewComBoboxCell列存在着绑定数据库列后出现值无效的提示 根据网上的解决办法,添加了DataError后可 ...

  4. eclipse scons 使用指南

    http://sconsolidator.com/projects/sconsolidator/wiki/Getting_Started Add SCons support to an existin ...

  5. cocos2d-x CCScrollView

    转自:http://www.cnblogs.com/dcxing/archive/2012/12/31/2840217.html ScrollView一般用在游戏的关卡选择这种类似的场景还有帮助这种场 ...

  6. 【HMTL】文字飞舞的美

    这是在一个大神那看到的就拿过来了,希望能够更多人能看到. 这个是效果: 源文件下载: 点 击 下 载

  7. RT-Thread学习笔记（1）

    前几天我在看uCOS-II的东西,看来看去一直没什么头绪.还有一点是,我很介意它现在是个商业软件,在官网下载东西,半天下完结果只有个lib,没有源代码.只能去其他地方下载老版本. 我还很介意不是在官方 ...

  8. python中文处理之encode/decode函数

    python中文处理相信迷惑过不少同学.下面说说python2/3的encode和decode函数. python2中,使用decode()和encode()来进行解码和编码,以unicode类型作为 ...

  9. 探索 Linux 内存模型--转

    引用:http://www.ibm.com/developerworks/cn/linux/l-memmod/index.html 理解 Linux 使用的内存模型是从更大程度上掌握 Linux 设计 ...

  10. YAR 并行RPC框架研究

    前几天,部门召开了PHP技术峰会 学习会议,大家分别对这次会议的PPT 做了简单的介绍, 其中提到了 鸟哥[惠新辰]的一篇PPT<微博LAMP 演变>,如果谁有需要可以去谷歌搜,或者去 h ...