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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!