<!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. Ecshop实现注册页面手机号唯一的验证

    前天,公司总监提了一个需求,实现我公司商城注册会员用手机号登录这个功能,那么这个功能容易修改,在我的前一篇博文中已经给出处理方法了,但是这里有一个问题,就是如果实现了用手机号码来登陆,那么就需要在注册 ...

  2. 【转】larbin中的url去重算法

    1.bloom filter算法 传说中,larbin使用bloom filter算法来进行url去重.那我们就先来了解下bloom filter算法好了. [以下转自:http://hi.baidu ...

  3. ASP.NET MVC 验证

  4. Codeforces Round #116 (Div. 2, ACM-ICPC Rules) C. Letter 暴力

    C. Letter Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/180/problem/C D ...

  5. Codeforces Gym H. Hell on the Markets 贪心

    Problem H. Hell on the MarketsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vj ...

  6. HDU 3410 &amp;&amp; POJ 3776 Passing the Message 单调队列

    题意: 给定n长的数组(下标从1-n)(n个人的身高,身高各不同样 问:对于第i个人,他能看到的左边最矮的人下标.(假设这个最矮的人被挡住了,则这个值为0) 还有右边最高的人下标,同理若被挡住了则这个 ...

  7. (转)ReSharper 配置及用法

    1:安装后,Resharper会用他自己的英文智能提示,替换掉 vs2010的智能提示,所以我们要换回到vs2010的智能提示 2:快捷键.是使用vs2010的快捷键还是使用 Resharper的快捷 ...

  8. Honda HDS IMMO PCM Code calculator Free Download

    HDS IMMO PCM Code calculator software for Honda vehicle models is free download available in Eobd2.f ...

  9. Python文件IO

    Python文件IO 有如下文本内容,文件路径为D:\temp,文件名称为lyric.txt, line1 Look ! line2 If U had one shot line3 One oppor ...

  10. oracle11g asm standalone 单实例重建

    原文地址:oracle11g asm单实例重建has 作者:datapeng 最近到客户那里处理故障,客户说,他们修改了一下hostname,导到has出现了问题,当然,他们的数据库也就无法再启动,把 ...