对话框/Tips
BOP - 现代响应式纯js模态对话框插件
PetitQ
BOP 是一款现代响应式纯 js 模态对话框插件。该模态对话框易于使用，可制作 Material Design 风格模态对话框，IOS 风格模态对话框和现代风格的模态对话框。
使用方法:
在页面中引入 bop.css 和 bop-js.js 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="../bop.css" media="screen">
<script src="js/bop-js.js"></script>
HTML 结构:
下面的每一个带 ID 的[div]元素都代表一个特定风格的模态对话框。
<div id="material-light">
<h1>Want to use this?</h1> <p> -- the content -- </p> <br>
<div class="exit" onclick="Exit()">EXIT</div>
</div>
<div id="material-dark">
<h1>Want to use this?</h1>
<p> -- the content -- </p> <br>
<div class="exit" onclick="exitDark()">EXIT</div>
</div>
<div id="material-light-anime">
<h1 id="head-anime">Want to use this?</h1>
<p id="text-anime"> -- the content -- </p> <br>
<div class="exit" onclick="exitLightAnime()">EXIT</div>
</div>
<div id="material-dark-anime">
<h1 id="head-anime-dark">Want to use this?</h1>
<p id="text-anime-dark"> -- the content -- </p> <br>
<div class="exit" onclick="exitDarkAnime()">EXIT</div>
</div>
<div id="ios-light">
<center>
<h1>Want to use this?</h1>
<p> -- the content -- </p> <br>
<div class="exit" onclick="iosLightExit()">OK</div>
</center>
</div>
<div id="ios-dark">
<center>
<h1>Want to use this?</h1>
<p> -- the content -- </p> <br>
<div class="exit" onclick="iosDarkExit()">OK</div>
</center>
</div>
<div id="modern-light">
<h1>Want to use this?</h1>
<p> -- the content -- </p> <br>
<div class="exit" onclick="modernExit()">EXIT</div>
</div>
<div id="modern-dark">
<h1>Want to use this?</h1>
<p> -- the content </p> <br>
<div class="exit" onclick="modernDarkExit()">EXIT</div>
</div>
<div id="modern-light-anime">
<h1 id="modernlight-head">Want to use this?</h1>
<p id="modernlight-text"> -- the content -- </p> <br>
<div class="exit" onclick="modernlightanimatedExit()">EXIT</div>
</div>
<div id="modern-dark-anime">
<h1 id="moderndark-head">Want to use this?</h1>
<p id="moderndark-text"> -- the content -- </p> <br>
<div class="exit" onclick="moderndarkanimatedExit()">EXIT</div>
</div> <!-- windows end here -->
触发模态窗口:
你可以通过一个按钮来触发相应主题的模态窗口。例如：
<div class="button" id="material-dark-anime-button" onclick="modernDarkAnime()">触发模态窗口</div>
onclick 方法中可以填入的方法有：
materialLight()
materialDark()
materialLightAnime()
iosLight()
iosDark()
modernLight()
modernDark()
modernLightAnime()
modernDarkAnime()
BOP 模态窗口插件的 github 地址为：https://github.com/punitweb/BOP
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
