1.0.9 • Published 2 years ago
@yzhura/smodals v1.0.9
��# smodals-plugin
SModals-plugin render modals into your HTML code.
Installation
Run:
npm i smodals
or link CDN into your HTML code:
<script src="https://cdn.jsdelivr.net/npm/smodals@1.0.7/dist/index.js" defer></script>
Ho to use:
If you wanna to create clickable HTML card make something similar:
<div class="some-card" data-modal-title="Modal header">
<div class="img-wrap">
<img data-modal-img src="https://picsum.photos/200" alt="alt">
</div>
<p data-modal-text>Hi there! Click on "More details" button to open modal</p>
<button class="open-modal-btn">More details</button>
</div>
- For classes I have styles already (but you can overwrite them)
class="some-card"
---> this class will be bind in js file...data-modal-title
---> need to insert title into modaldata-modal-img
---> need to insert image into modaldata-modal-text
---> need to insert text into modalclass="open-modal-btn"
---> static class to open modal (if this button not exist click will work on parent component, in our case this is "some-card")
and in your js file:
new SModals('.some-card');
- '.some-card' ---> ...comming from you HTML
Or you can open your custom content. Create your HTML:
<div data-modal-id="modal-1" class="custom-modal">
<div>
Modal from HTML
<button class="modal-button-close">Close</button>
</div>
</div>
class="modal-button-close"
is a static class. Don't change it.
after that create button and bind it from data-attribute:
<button data-modal-id="modal-1">Open Modal</button>
data-modal-id
must be indentical
For more examples
clone this project and run:
npm i
npm run start
then open example.html