<!DOCTYPE html>
<html lang="zh">
<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.0">
<title>带多种CSS3过渡动画的jquery模态窗口插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/quick-modal.min.css">
<style>
/* ----------------------------------------
Demo-Specific Styles
---------------------------------------- */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
width: 100%;
padding: 0;
margin: 0;
}
a, a:visited {
opacity: 1;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
a:hover {
opacity: 0.5;
}
pre {
font-family: 'PT Mono', monospace;
font-size: 18px;
line-height: 22px;
display: block;
max-width: 560px;
padding: 20px 24px;
margin: 0 auto;
overflow: auto;
background-color: #f8f5f0;
border-radius: 3px;
}
.pre-container:after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #f8f5f0 transparent transparent transparent;
margin: 0 auto;
position: relative;
bottom: 2px;
}
.container {
width: 100%;
padding: 0 40px;
position: absolute;
top: 65%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
a.button, a.button:visited {
display: block;
padding: 8px 0;
margin: 14px auto 0;
background-color: #e4af79;
color: #f8f5f0;
text-align: center;
max-width: 100px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
border-radius: 3px;
text-transform: uppercase;
}
p {
margin-top: 14px;
}
@media only screen and (max-width: 768px) {
pre {
font-size: 14px;
line-height: 20px;
}
#prev, #next {
display: none;
}
.mobile-off {
display: none !important;
}
nav {
top: 42px;
}
}
@media only screen and (max-width: 480px) {
pre {
font-size: 10px;
line-height: 16px;
}
}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>带多种CSS3过渡动画的jquery模态窗口插件 <span>Easy jQuery Modal Plugin with CSS3 Animations</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
<div class="htmleaf-demo center">
<a href="index.html">DEMO1</a>
<a href="index2.html">DEMO2</a>
<a href="index3.html">DEMO3</a>
<a href="index4.html" class="current">DEMO4</a>
</div>
</header>
<div class="container content">
<div class="pre-container">
<pre>
$(document).ready(function() {
$('.open-modal').click(function() {
$('#my-modal').quickModal('open', {
animation: 'fade-down',
speed: 250,
timing: 'ease-in',
enableClickAway: true,
appendBackgroundTo: 'body .content'
});
return false;
});
$('#close-button').click(function() {
$('#my-modal').quickModal('close', {
speed: 1250,
timing: 'linear'
});
return false;
});
});
</pre>
</div>
<a href="#" class="button open-modal" data-modal-id="my-modal">Click Me</a>
<div id="my-modal" class="qm-modal">
<h1>Hello, world!</h1>
<p>Jelly beans sweet roll wafer ice cream. Icing cake lemon drops pastry soufflé cheesecake. Fruitcake bear claw cotton candy chocolate cake. Apple pie sweet macaroon cake. Bonbon jelly-o chocolate bar bonbon pudding macaroon topping pastry. Tootsie roll cupcake pastry icing. Macaroon caramels muffin sugar plum topping dessert.</p>
<p>Sweet topping donut liquorice brownie. Tart macaroon pastry pie fruitcake tootsie roll topping cookie. Cheesecake liquorice liquorice. Macaroon ice cream brownie muffin donut brownie soufflé powder.</p>
<a href="#" id="close-button" class="button" data-modal-id="my-modal">Close</a>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/jquery.quick-modal.js"></script>
<script>
/* ----------------------------------------
prettyPre Plugin by Tim Medora（pre格式代码显示插件）
---------------------------------------- */
(function( $ ) {
$.fn.prettyPre = function( method ) {
var defaults = {
ignoreExpression: /\s/ // what should be ignored?
};
var methods = {
init: function( options ) {
this.each( function() {
var context = $.extend( {}, defaults, options );
var $obj = $( this );
var usingInnerText = true;
var text = $obj.get( 0 ).innerText;
// some browsers support innerText...some don't...some ONLY work with innerText.
if ( typeof text == "undefined" ) {
text = $ob
带多种CSS3过渡动画的jquery模态窗口插件modal.js.zip （16个子文件） 
132692144511760266 jqueryquick-modal css 
htmleaf-demo.css 6KB quick-modal.min.css 3KB quick-modal.css 3KB normalize.css 2KB
index4.html 12KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB index.html 10KB js jquery.quick-modal.min.js 3KB jquery-1.11.0.min.js 94KB jquery.quick-modal.js 6KB index2.html 11KB index3.html 11KB scss quick-modal.scss 3KB资源评论
毕业_设计
- 粉丝: 1995
- 资源: 1万+
最新资源
- 基于ssm的公务员招考信息发布平台源码（java毕业设计完整源码+LW）.zip
- Quartz 在项目中的使用实例，可以动态增删改查定时任务，包括 Quartz 的优秀配置
- (176958828)Java+springboot超市会员积分管理系统的设计与实现
- (178477228)超市会员积分管理系统主要用于实现了企业管理数据统计等
- (7674260)操作系统试卷
- 基于ssm的风顺农场供销一体系统的设计与实现源码（java毕业设计完整源码+LW）.zip
- (177673816)以下是一个简单的Python代码，可以模拟春节烟花的效果：
- 高度灵活小机械手sw18可编辑全套设计资料100%好用.zip
- 数据库基本操作.sql
- 基于ssm的健达企业项目管理系统的设计与实现源码（java毕业设计完整源码+LW）.zip
- 纵维立方 Anycubic Kobra 2 Neo 高温（285）固件
- (29868230)网上订餐系统的设计与实现
- 聚丙烯膜全球市场调研报告：2023年中国聚丙烯市场规模已达3424.86亿元
- (175403238)蚁狮优化算法（ALO）源代码+23个经典测试函数
- 图书管理设计【陈表达原创】.accdb
- (177354392)多目标蚁狮优化算法（MOALO）【含Matlab源码 1598期】.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
