modal-plugin v1.0.3
To use this Modal Window plugin.
First off you will need to download it using NPM. Just type
npm install modal-plugin
const mod = new Modal({})The following code will call the Modal class in your html file.
##HTML
Now we will need to go to our HTML5 file.
And in the bottom of the <body> tag connect our script.
Using this directory node_modules/modal-plugin/modal.js
Then just connect your own script file.
##CSS
To make the modal work properly we will need to connect css files to our HTML document.
Go to your HTML file and connect our plugins styles with <link> tag.
<link rel="stylesheet" href="node_modules/modal-plugin/styles/style.css">##In conclusion
Now we need to write some code for plugin to work.
<button data-path="first">Open</button>
<div class="modal">
<div data-target="first" class="modal-container">
<div class="modal-top">
<h4 class="modal-title">Modal Title</h4>
<button class="modal-close">
X
</button>
</div>
<div class="modal-content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui doloremque optio quaerat cupiditate laudantium tempora sit eum sint accusantium nemo. Veniam alias delectus quo numquam voluptatibus quibusdam omnis. Totam, consectetur.
</div>
<form class="modal-form">
<input type="text" />
<button type="submit">Submit</button>
</form>
</div>
</div>Every button or other tag with the data-path attribute will open our modal.
Then we need to create a <div class="modal"></div>.
And in this new modal div we need a modal-container div. Which will be the container for our modal.
This modal-container div must have <div class="modal-container" data-target="anything here"></div>
Congrats! You just got your coll and simple modal-window plugin.
P.M. This plugin will be updated. So this is not the final version.