flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Popup modal


Introduction

With CSS Framework you can create a popup screen with the modal class.


Click on the Class name to copy it.

popup Main class for popup
popup-inner Class for popup content
popup-close Class for the close button

The popups also use their own attributes:

Click on the Class name to copy it.

data-popup-open="popup-name" Attribute for opening the popup with specific name
data-popup="popup-name" Attribute for the popup, it has the same name as the opening attribute
data-popup-close="popup-name" Attribute for closing the popup


Example

Open Popup #1 Open Popup #2

Example code:

<a class="button" data-popup-open="popup-1" href="#">Open Popup #1</a>
<a class="button" data-popup-open="popup-2" href="#">Open Popup #2</a>

<div class="popup" data-popup="popup-1">
  <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p class="lorum-sm"></p>
    <p class="lorum-sm"></p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
  </div>
</div>

<div class="popup" data-popup="popup-2">
  <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #2)</h2>
    <p class="lorum-sm"></p>
    <p class="lorum-sm"></p>
    <p><a data-popup-close="popup-2" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
  </div>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster