<!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>js+css3有过渡动画模态窗口插件tingle.js</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/demo.css" media="all">
<link rel="stylesheet" href="dist/tingle.css" media="all">
</head>
<body>
<div class="header">
<div class="container">
<h1 class="header__title">tingle.js</h1>
<div class="header__tagline">A minimalist and easy-to-use modal plugin written in pure JavaScript</div>
<img class="header__pic" src="modal.svg" alt="Pure JavaScript modal plugin">
</div>
</div>
<div class="container tingle-content-wrapper content">
<h2 data-bullet="1">Give it a try</h2>
<ul>
<li>No dependencies required</li>
<li>Fully customizable via CSS</li>
<li>CSS transitions</li>
<li>Simple API</li>
<li>No extra files to download</li>
<li>Created with UX in mind</li>
</ul>
<p>Below you will find some examples for using tingle: </p>
<button class="btn btn--primary mr1 js-tingle-modal-1">A simple modal</button>
<button class="btn btn--secondary mr1 js-tingle-modal-2">Need buttons?</button>
<button class="btn btn--secondary mr1 js-tingle-modal-3">Big content? No problem!</button>
<button class="btn btn--secondary mr1 js-tingle-modal-4">Stick to me!</button>
<button class="btn btn--secondary mr1 js-tingle-modal-5">?</button>
</div>
</div>
<!-- Tingle tiny content -->
<div class="tingle-demo tingle-demo-tiny">
<h1>A small content</h1>
<p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<!-- /Tingle tiny content -->
<!-- Tingle big content -->
<div class="tingle-demo tingle-demo-big">
<h1 class="plop">Big content with scroll</h1>
<p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<img src="img/1.jpg" height="400">
<p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<img src="img/2.jpg" height="400">
<p>Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<script src="dist/tingle.js"></script>
<script type="text/javascript">
/**
* Modal Tiny no footer
*/
var modalTinyNoFooter = new tingle.modal({
onClose: function() {
console.log('close');
},
onOpen: function() {
console.log('open');
console.log(this.modalBox.clientWidth);
},
cssClass: ['class1', 'class2']
});
var btn = document.querySelector('.js-tingle-modal-1');
btn.addEventListener('click', function(){
modalTinyNoFooter.open();
});
modalTinyNoFooter.setContent(document.querySelector('.tingle-demo-tiny').innerHTML);
/**
* Modal tiny with btn
*/
var modalTinyBtn = new tingle.modal({
footer: true
});
var btn2 = document.querySelector('.js-tingle-modal-2');
btn2.addEventListener('click', function(){
modalTinyBtn.open();
});
modalTinyBtn.setContent(document.querySelector('.tingle-demo-tiny').innerHTML);
modalTinyBtn.addFooterBtn('Primary action', 'tingle-btn tingle-btn--primary tingle-btn--pull-right', function() {
alert('click on primary button!');
});
modalTinyBtn.addFooterBtn('Cancel', 'tingle-btn tingle-btn--default tingle-btn--pull-right', function(){
modalTinyBtn.close();
});
modalTinyBtn.addFooterBtn('Danger!', 'tingle-btn tingle-btn--danger', function(){
alert('click on danger button!');
});
/**
* Modal big
*/
var modalBigContent = new tingle.modal();
var btn3 = document.querySelector('.js-tingle-modal-3');
btn3.addEventListener('click', function(){
modalBigContent.open();
});
modalBigContent.setContent(document.querySelector('.tingle-demo-big').innerHTML);
/**
* Modal big with sticky footer
*/
var modalStickyFooter = new tingle.modal({
footer: true,
stickyFooter: true
});
var btn4 = document.querySelector('.js-tingle-modal-4');
btn4.addEventListener('click', function(){
modalStickyFooter.open();
});
modalStickyFooter.setFooterContent("This footer is sticky so it's useful to keep actions always visible.");
modalStickyFooter.setContent(document.querySelector('.tingle-demo-big').innerHTML);
/**
* Modal suprise
*/
var btn5 = document.querySelector('.js-tingle-modal-5');
btn5.addEventListener('click', function(){
var modalSurprise = new tingle.modal({
onClose: function(){
modalSurprise.destroy();
}
});
modalSurprise.setContent('<iframe width="100%" height="400" src="http://www.lanrenzhijia.com" frameborder="0" allowfullscreen></iframe>');
modalSurprise.open();
});
</script>
<div style="text-align:center;margin:5px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
js+css3有过渡动画模态窗口插件tingle.js.zip
版权申诉
66 浏览量
2023-09-27
22:16:05
上传
评论
收藏 17KB ZIP 举报
js+css3有过渡动画模态窗口插件tingle.js.zip （10个子文件） 
modal.svg 3KB
src 
tingle.js 12KB tingle.css 3KB dist tingle.min.css 2KB tingle.min.js 5KB tingle.js 12KB tingle.css 3KB css demo.css 5KB zzsc.css 701B
index.html 5KB资源评论
