Create unlimited popups of every type you need and customize every facet of each of your popups from theme to position.
No matter if you are a beginner or an advanced user, starting with Simple PopUp is easy.
Include CSS.
First, include Bootstrap 4 CSS files into your HTML head:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
Include JS.
Yep, include popUp.min.js and your own app.js before end tag </body>.
<script defer src="popUp.min.js"></script>
<script defer src="app.js"></script>
Include HTML.
Create div-container with random class-name for every popup-window you need.
For example, we created three containers:
<div class="popupContainer-1"></div>
<div class="popupContainer-2"></div>
<div class="popupContainer-3"></div>
Chose control elements.
Chose control elements which will show popup-window on click.
Add random class-name for every element. If several elements show the same popup-window they will get the same class-name.
For example, we choose next elements (buttons):
<button class="showModal-1" type="button">Show PopUp #1</button>
<button class="showModal-2" type="button">Show PopUp #2</button>
<button class="showModal-3" type="button">Show PopUp #3</button>
<button class="showModal-3" type="button">Show PopUp #3</button>
<button class="showModal-3" type="button">Show PopUp #3</button>
Call the plugin.
Now initialize function in app.js for every popup-window and your simplePopUp is ready.
Options.
Options "openBtn" and "container" are necessary.
let popup = new PopUp({
openBtn: '...class-name of elements that will show popup-window on click...',
container: '...class-name of div-container provided for this popup-window (content must be a block element for proper render)...',
reloadBtn: '...class-name of elements that will update the list of openBtn-elements on click (optional - closePopUpButton update the list of openBtn-element every time you press it)...'
content: `...content of popup-window...`,
maskColor: '...color of background mask...',
maskOpacity: '...opacity of background mask (maskOpacity can't be equals 0)...',
})
By default Simple PopUp has next options:
({
content: 'NO CONTENT',
maskColor: '#343a40',
maskOpacity: '0.7',
})
Example #1.
Initialization:
let popup1 = new PopUp({
openBtn: 'showModal-1',
container: 'popupContainer-1',
content: `<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>`,
maskColor: '#0097A7',
maskOpacity: '0.9',
})
Example #2.
Initialization:
let popup2 = new PopUp({
openBtn: 'showModal-2',
container: 'popupContainer-2',
content: `<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<img class="card-img w-100" src="https://picsum.photos/500" alt="#">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Et accusantium vitae rem doloribus praesentium illum dolorem cum, quod dolores facilis,
laboriosam alias fugiat quaerat! Quod exercitationem unde facilis quia vel!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Et accusantium vitae rem doloribus praesentium illum dolorem cum, quod dolores facilis,
laboriosam alias fugiat quaerat!
Quod exercitationem unde facilis quia vel! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et accusantium vitae rem doloribus praesentium illum dolorem cum, quod
dolores facilis, laboriosam alias fugiat quaerat! Quod exercitationem unde facilis quia
vel! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et accusantium vitae rem
doloribus praesentium illum dolorem cum, quod dolores facilis, laboriosam alias fugiat quaerat!
Quod exercitationem unde facilis quia vel!</p>
<p class="card-text">
<small class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Et accusantium vitae rem doloribus praesentium illum dolorem cum, quod dolores facilis,
laboriosam alias fugiat quaerat! Quod exercitationem unde facilis quia vel!</small></p>
</div>
</div>
</div>
</div>`,
maskColor: '#009688',
maskOpacity: '0.75',
})
Example #2.
Initialization:
let popup3 = new PopUp({
openBtn: 'showModal-3',
container: 'popupContainer-3',
content: `<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div>
</div>`,
maskColor: '#9E9E9E',
maskOpacity: '0.8',
})