Modern Responsive Popup Library – BOP

Preview:

Description:

The BOP JS/CSS framework helps you create responsive, cross-browser, Material Design / iOS / modern style popup boxes on the web applications.

How to use it:

Insert the BOP’s JavaScript and CSS files into the webpage.

<link rel="stylesheet" href="bop.css"> 
<script src="bop-js.js""></script>

Insert content into the popup box and add a theme ID of your choice to the wrapping element.

<div id="material-light">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="material-dark">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="material-light-anime">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="material-dark-anime">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="ios-light">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="ios-dark">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="modern-light">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="modern-dark">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

<div id="modern-light-anime">  Content goes here 
  <div class="exit" onclick="Exit()">EXIT</div>
</div>

Create trigger buttons to toggle the popup boxes.

<div class="button" onclick="materialLight()"> Open The Popup </div>

More triggers.

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

More Previews:

iOS style

Modern Style