justbard-simple-modal v1.0.8
JustBard Simple Modal
A very simple, lightweight modal and control system made using pure vanilla javascript.
Installation
npm install justbard-simple-modal
Getting Started
Copy over the needed CSS and JS from the node_modules install directory to your project directory and import them as you would any normal js/css file.
I.E.
<link rel="stylesheet" href="css/jb_modal.css" />
<script src="js/jb_modal.js"></script>
To build the modal object div call buildJBModal()
To Open the modal call openJBModal()
JBModal supports various parameters for use during the building call.
The defaults are below:
jbModalParams.modalSize = false;
jbModalParams.buildHeader = true;
jbModalParams.closeEverywhere = true; // Grants the ability to close by clicking outside.
jbModalParams.jb_modal_header_image = false;
jbModalParams.jb_modal_header_image_clip = false;
jbModalParams.jb_modal_header_1 = false;
jbModalParams.jb_modal_header_2 = false;
jbModalParams.set_empty_content = true;
jbModalParams.set_empty_footer = true;
To build the small sized modal with a header image, header text and main body content:
jbModalParams.jb_modal_header_image =
'https://images.unsplash.com/photo-1512987415479-85f370bca602?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80';
jbModalParams.jb_modal_header_1 = 'Small Sized Modal';
jbModalParams.jb_modal_header_2 =
"A simple modal just trying to make it's way in the world";
jbModalParams.jb_modal_header_image_clip = '--clip-bottom';
buildJBModal("This modal has a bottom clip applied to it's header image");
Updating Content:
To update the header content:
updateJBModaHeader(
'https://images.unsplash.com/photo-1643575102128-0d6b42fbdda1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80',
'--clip',
'Some New Header',
'Wow this is some info!'
);
To update the main body content:
updateJBModalContent("Some New Information! <br /><br /><strong>Can't miss out on knowing this new stuff!</strong>");
To update the footer content:
updateJBModalFooterContent("Some New Footer Information!");