Skip to content

stivsk/paper_card_modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Paper Card Modal

https://stivsk.github.io/paper_card_modal/

First, get the crew

Add the paperCardModal.css then papperCardModal.js and finally your main.js

<link rel="stylesheet" href="./PaperCardModal/src/css/paperCardModal.css">
<script src="./PaperCardModal/src/js/paperCardModal.js"></script>
<script src="./main.js"></script>

Put your rudder

Add the button which gonna call the modal, give it an id and add some classes, like so

<button id="btn_modal" class="btn raised">Paper Card Modal !</button>

Sail the ship

in your main.js you can make a modal by two ways

(function () {

  var $ = document;

  // Make your modal
  makeModal(
    $.getElementById('btn_modal'),   // get the rudder (button) by its id
    {
      'txt_title': 'Modal Title',    // give it a title
      'txt_body': 'Modal text',      // add some text to the body
      'img_header': 'path_to_image'  // add a header image
    }
  );
  
})();
(function () {

  var $ = document;

  var rudder = $.getElementById('btn_modal'); // get the rudder (button) by its id
  var info = {
                'txt_title': 'Modal Title',    // add a title
                'txt_body': 'Modal text',      // add some text to the body
                'img_header': 'path_to_image'  // add a header image
              }

  makeModal(rudder, info); // Make your modal
  
})();