JS模态窗口插件tingle.js

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS模态窗口插件tingle.js 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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模态窗口插件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.baidu.com/" frameborder="0" allowfullscreen></iframe>');
		modalSurprise.open();
	});

</script>
</body>
</html>

CSS代码(zzsc.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)