Modaal.js Library Popup/Modal Window in Vanilla Javascript & jQuery Full Project For Beginners

 

Welcome folks today in this post we will be looking at modaal.js popup/modal window in vanilla javascript & jquery. All the full source code of the application is shown below.

 

 

 

 

 

Get Started

 

 

1.2. Installation with Package Managers

Modaal is now setup and ready to be used with Bower and NPM and can be installed using the following commands.

bower install  modaal

npm install  modaal

 

 

1.3 Installation with CDN

Modaal is now setup and ready to be used with CDN JSDelivr jsDelivr Hits

1.4. The Basics

Out of the box Modaal is setup to work using inline content using as little customisation as possible. The first thing you’ll require is a link to trigger the modal window. It’s recommended that your href attribute targets a unique ID for a hidden element on the page containing your modal content. Like so:

<a href="#inline" class="inline">Show</a>
<div id="inline" style="display:none;">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
$('.inline').modaal();

If you would prefer your trigger element is not an <a href="#">, you can define a content_source value like so:

<button class="inline">Show</button>
<div id="inline" style="display:none;">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

 

See also  Build a SVG.js Ping Pong Game in Browser Using HTML5 & Javascript Full Project For Beginners

 

$('.inline').modaal({
    content_source: '#inline'
});

2. Configuration

2.1. Practical Example

$('.my-link').modaal({
    type: 'ajax',
    loading_content: 'Loading content, please wait.'
});

Leave a Reply