deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-10 09:46:41 +02:00
Code Issues Projects Releases Wiki Activity
papercss/docs/content/docs/components/modals.md
MunifTanjim 9b2342a3f4
shiny new docs
2017-12-28 12:09:53 +06:00

2.4 KiB
Raw Blame History

title description
Modals PaperCSS Modals

Simple modal example

This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework.

x

Modal Title

Modal Subtitle

This is an example of modal which is implemented with pure CSS! :D

Code:

<div class="row flex-space child-borders">
  <a href="modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-space" id="modal-1">
  <div class="modal-body">
    <a class="btn-close" href="#modals">x</a>
    <h4 class="modal-title">Modal Title</h4>
    <h5 class="modal-subtitle">Modal Subtitle</h5>
    <p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
    <button>Nice!</button>
  </div>
</div>

Modal with title, text and links

x

Modal Title

Modal Subtitle

This is an example of modal which is implemented with pure CSS! :D

OK Close

Code:

<div class="row flex-space child-borders">
  <a href="modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-space" id="modal-1">
  <div class="modal-body">
    <a class="btn-close" href="#modals">x</a>
    <h4 class="modal-title">Modal Title</h4>
    <h5 class="modal-subtitle">Modal Subtitle</h5>
    <p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
    <a class="modal-link" href="#modals">OK</a>
    <a class="modal-link" href="#modals">Close</a>
  </div>
</div>