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

在线预览    源码下载