jQuery之对话框
<!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之对话框的更多相关文章
- jQuery cxDialog 对话框
cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...
- jQuery UI 对话框(Dialog) - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- 15款基于 jQuery模态对话框
在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...
- jquery自定义对话框alert、confirm和prompt
jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...
- 解决jQuery UI 对话框兼容性问题
默认情况下使用jQuery UI的对话框,在Chrome浏览器是没问题的,但是在IE里却会显示对话框,用户体验非常不好.改变一下div的属性即可. 原本是这样: <div id="di ...
- 使用CSS和jQuery实现对话框
因为项目中要显示一些对话框,但用alert显得太丑,后从网上找了一些插件,但有觉得不好用,因此自己试用CSS和jQuery写了一个对话框,代码如下: <!DOCTYPE html> < ...
- 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件
多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...
- jQuery手机对话框插件
最近,公司一直在做微网站之类的,一直在看别的微网站,发现一些对话框的样式很不错,所以自己就动手把样式剥离出来写成一个简单的插件,方便其他项目中使用到.废话不多说,上插件源码: /* *jQuery简单 ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- 目录启动CXF启动报告LinkageError异常以及Java的endorsed机制
本文纯属个人见解,是对前面学习的总结,如有描述不正确的地方还请高手指正~ Exception in thread "main" java.lang.LinkageError: JA ...
- Codeforces Round #315 (Div. 1) A. Primes or Palindromes? 暴力
A. Primes or Palindromes?Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3261 ...
- MyBatis之六:缓存
MyBatis 3中的缓存实现的很多改进都已经实现了,使得它更加强大而且易于配置.默认情况下是没有开启缓存的,除了局部的session缓存,可以增强变现而且处理循环依赖也是必须的.要开启二级缓存,你需 ...
- seajs 2.3.0 加入jquery
[前言] 上篇文章简单的介绍了seajs的使用,下午使用seajs整合jquery就碰到问题了. 下载seajs上的examples,里面直接require('jquery')没有不论什么问题, 我照 ...
- 1020. Tree Traversals (25)
the problem is from pat,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1020 and the ...
- C++_快速排序(纯C版本)
//比较大小 static int compare_int(const void *int1,const void *int2) { if(*(const int*)int1>*(const i ...
- mysql数据库问答
一. 问:如果有一张表,里面有个字段为id的自增主键,当已经向表里面插入了10条数据之后,删除了id为8,9,10的数据,再把mysql重启,之后再插入一条数据,那么这条数据的id值应该是多少,是8, ...
- 如何删除google流氓扩展(强制安装,并且无权限删除)
chrome现在也是流氓遍地跑, 没比IE安全到哪里. TubeAdblocKer 这个流氓扩展,强制安装,无法删除.google了一大堆方法,全部无效.祭出了filelocator这个神器之后,终于 ...
- UrlPathEncode与UrlEncode的区别
UrlEncode与UrlPathEncode 的基本作用都是对 URL 字符串进行编码 不同点总结如下: 不同点 UrlEncode UrlPathEncode 处理空格的方式 替换成“+” 替换成 ...
- Android(java)学习笔记106-1:深入分析Java ClassLoader原理
1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...