<!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资源评论
毕业_设计
- 粉丝: 1976
- 资源: 1万+
最新资源
- 2023-04-06-项目笔记 - 第三百一十九阶段 - 4.4.2.317全局变量的作用域-317 -2025.11.16
- 2023-04-06-项目笔记 - 第三百一十九阶段 - 4.4.2.317全局变量的作用域-317 -2025.11.16
- 1503ANDH1503002016_20241116222825
- 时间序列-黄金-15秒数据
- C#HR人事管理系统源码数据库 MySQL源码类型 WebForm
- C#CS餐饮管理系统源码数据库 SQL2008源码类型 WinForm
- 蛾类识别系统（深度学习+UI可视化）
- 时间序列-黄金-5秒数据
- java版ssm企业工资管理系统源码数据库 MySQL源码类型 WebForm
- 树洞漫画_1.0.2.apk
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
