PUY Modals

PUY Modals is a javascript library function which can be used to generate Bootstrap 4 Modal Popups dynamically.

On this page I am demonstrating several types of popups that are possible with PUYMODALS. The combinations are unlimited.

Source Code: https://github.com/aybhalala/puymodals
Simple Modal with heading and message

Initialization code

puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>'})

Most of the attributes can be HTML content.

Modal with heading and message and icon

Initialization code

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.',icon: 'fab fa-js-square fa-3x'})

Most of the attributes can be HTML content.

Showing/Hiding Header and Footer of Modal

Different Possible combinations

puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showHeader: false'})

Hiding the header.

puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showFooter: true'})

Showing the footer.

puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showHeader: false, showFooter: true'})

Hiding the header and showing the footer.

Load a page using jQuery's load function

Initialization code

puyModal({title:'Load Test',loadPage:'test.html'})

It is recommended to use a page on your website for loadPage function. For external resources use Iframe

Load an Iframe inside the Modal's Body

Initialization code

puyModal({title:'Iframe Test',type:'iframe',iframe:'http://pateladitya.com'})

Using Iframe for loading external content

Video Popup

Initialization code

puyModal({title:'Video Test',type:'video',videoSource:'youtube',embedTag:'_7XJenTvR34'})

Using Iframe loading external content

Video Popup Using class .puyVideo and element attributes

Initialization code

<button type="button" class="btn btn-primary puyVideo" data-href="YE7VzlLtp-4" data-videoSource="youtube" title="Big Buck Bunny">Youtube</button>

<a class="btn btn-primary puyVideo" href="1084537" data-videoSource="vimeo" title="Big Buck Bunny">Vimeo</a>

Using class name on buttons, anchors or any other elements to initiate a Video Popup

Vimeo