当前位置：首页 > 网页特效 > 弹出层

BOP-现代响应式纯js模态对话框插件

分类：弹出层日期：2024-05-14 点击(1) 评论(0)

BOP-现代响应式纯js模态对话框插件

简介

##### 使用方法
在页面中引入bop.css和bop-js.js文件。

```html
<link rel="stylesheet" href="../bop.css" media="screen"> 
<script src="js/bop-js.js"></script>  
```         
#####  HTML结构
下面的每一个带ID的div元素都代表一个特定风格的模态对话框。

```html
<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>       
```      
#####  触发模态窗口
你可以通过一个按钮来触发相应主题的模态窗口。例如：

```html
<div class="button" id="material-dark-anime-button" onclick="modernDarkAnime()">触发模态窗口</div>   
```           
onclick方法中可以填入的方法有：

- materialLight()
- materialDark()
- materialLightAnime()
- iosLight()
- iosDark()
- modernLight()
- modernDark()
- modernLightAnime()
- modernDarkAnime()

web299.com

BOP-现代响应式纯js模态对话框插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果