<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>iziModal.js基于jQuery的模态弹窗示例-bootschool.net</title>
<link rel="stylesheet" href="js/iziModal-1.5.1/css/iziModal.min.css">
<link rel="stylesheet" href="css/demo.css">
<meta name="description" content="iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷。该模态弹窗插件不仅支持动画特效，而且还支持多种调用方式，如：支持iframe调用，Ajax异步加载，制作alert效果，支持大内容加载等。">
</head>
<body>
<main>
<section class="cd-section" id="Welcome">
<div class="highlight bg">
<div class="core">
<h1><span></span>iziModal.js <span>示例</span></h1>
<br>
<ul class="buttons">
<li><a href="" class="trigger-default">默认示例</a></li>
<li><a href="" class="trigger-iframe">Iframe示例</a></li>
<li><a href="" class="trigger-custom">自定义示例</a></li>
<li><a href="" class="trigger-alert">Alert提示</a></li>
<li><a href="" class="trigger-alert2">错误提示</a></li>
<li><a href="" class="trigger-large">大内容示例</a></li>
<li class="lava"></li>
</ul>
</div>
<div class="modal"></div>
</div>
</section>
</main>
<div class="bg"></div>
<div id="modal-default" data-iziModal-fullscreen="true" data-iziModal-title="欢迎使用iziModal.js插件" data-iziModal-subtitle="iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷" data-iziModal-icon="icon-home">
<p>如下为插件的部分示例</p>
<h4><span>Ajax示例</span></h4>
<button class="btn btn-ajax">Ajax加载</button>
<button class="btn btn-fetch">Fetch示例</button>
<h4><span>切换按钮</span></h4>
<button class="btn" data-izimodal-prev>前一个</button>
<button class="btn" data-izimodal-next>下一个</button>
<h4><span>属性示例</span></h4>
<button class="btn" data-izimodal-close>关闭</button>
<button class="btn" data-izimodal-fullscreen>全屏</button>
<h4><span>自定义示例</span></h4>
<button class="btn" data-iziModal-open="#modal-custom" data-iziModal-zindex="20000" data-iziModal-preventClose>打开自定义弹窗</button>
</div>
<div id="modal-custom">
<button data-iziModal-close class="icon-close">X</button>
<header>
<a href="" id="signin">登录</a>
<a href="" class="active">注册</a>
</header>
<div class="sections">
<section class="hide">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<footer>
<button data-iziModal-close>取消</button>
<button class="submit">登录</button>
</footer>
</section>
<section>
<input type="text" placeholder="用户名">
<input type="text" placeholder="邮箱">
<input type="password" placeholder="密码">
<label for="check"><input type="checkbox" name="checkbox" id="check" value="1">同意-<u>协议</u>.</label>
<footer>
<button data-iziModal-close data-iziModal-transitionOut="bounceOutDown">取消</button>
<button class="submit">创建账户</button>
</footer>
</section>
</div>
</div>
<div id="modal-large" data-iziModal-group="grupo1" data-iziModal-fullscreen="true">
<p>iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷。该模态弹窗插件不仅支持动画特效，而且还支持多种调用方式，如：支持iframe调用，Ajax异步加载，制作alert效果，支持大内容加载等。</p>
<hr>
<p>iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷。该模态弹窗插件不仅支持动画特效，而且还支持多种调用方式，如：支持iframe调用，Ajax异步加载，制作alert效果，支持大内容加载等。</p>
<hr>
<p>iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷。该模态弹窗插件不仅支持动画特效，而且还支持多种调用方式，如：支持iframe调用，Ajax异步加载，制作alert效果，支持大内容加载等。</p>
<p>iziModal是一款基于jQuery的弹窗模态插件，具有优雅、响应快速、灵活轻便的特性，很是炫酷。该模态弹窗插件不仅支持动画特效，而且还支持多种调用方式，如：支持iframe调用，Ajax异步加载，制作alert效果，支持大内容加载等。.</p>
</div>
<p style="visibility:hidden;">
<a href="http://www.bootschool.com">www.bootschool.com编辑或提供示例</a>
</p>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/iziModal-1.5.1/js/iziModal.min.js" type="text/javascript"></script>
<script src="js/demo.js" type="text/javascript"></script>
</body>
</html>
模态框：创建模态框所需要的引入文件
需积分: 0 180 浏览量
2023-04-25
20:43:07
上传
评论
收藏 1.35MB RAR 举报
模态框.rar （38个子文件） 
font-awesome-5.15.3 webfonts 
fa-brands-400.woff 88KB fa-brands-400.ttf 131KB
fa-brands-400.svg 730KB fa-solid-900.woff 99KB fa-solid-900.eot 198KB fa-solid-900.ttf 198KB fa-brands-400.woff2 75KB fa-regular-400.woff2 13KB fa-brands-400.eot 131KB fa-regular-400.eot 33KB fa-regular-400.woff 16KB fa-regular-400.svg 141KB fa-regular-400.ttf 33KB fa-solid-900.woff2 76KB fa-solid-900.svg 897KB css all.css 72KB motaikuang js .DS_Store 6KB demo.js 8KB iziModal-1.5.1 .DS_Store 6KB js iziModal.js 46KB iziModal.min.js 25KB css iziModal.css 92KB iziModal.min.css 84KB jquery.min.js 90KB css demo.css 24KB
index.html 5KB __MACOSX js iziModal-1.5.1 ._js 212B ._css 212B js ._iziModal.min.js 212B ._iziModal.js 212B css ._iziModal.min.css 212B ._iziModal.css 212B ._.DS_Store 120B ._iziModal-1.5.1 212B ._jquery.min.js 176B ._.DS_Store 120B iziModal iziModal.css 92KB iziModal.min.js 25KB资源评论
