## Layouts

Layout could be customized with these provided options.

| Description                     | Option                              | Buttons                                                                                                                                                                               |
|---------------------------------|-------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Use custom layout on mobile     | `hasMobileLayout: true`             | [View popup](#popup-mobile)                                                                                                                                                           |
| Display popup on the right side | `theme: "right-side"`               | [View popup](#popup-right-side)                                                                                                                                                       |
| Change the close button text    | `closeButtonInnerText: "CLOSE"`     | [View popup](#popup-custom-close)                                                                                                                                                     |
| Display the popup in the corner | `theme: "corner"`                   | [Bottom right](#popup-corner-bottom-right) - [Bottom left](#popup-corner-bottom-left) - [Top right](#popup-corner-top-right) - [Top left](#popup-corner-top-left)                     |
| Display the popup in the corner | `theme: "corner"` `cornerFade:true` | [Bottom right](#popup-corner-fade-bottom-right) - [Bottom left](#popup-corner-fade-bottom-left) - [Top right](#popup-corner-fade-top-right) - [Top left](#popup-corner-fade-top-left) |

<div data-easy-popup='{"id": "popup-mobile", "hasMobileLayout": "true"}'>
    <!-- Popup content -->
<h2>Adjust the screen size to see the layout changes.</h2>    
<p>
Potenti ullamcorper sit tincidunt turpis molestie litora sapien. Amet dignissim turpis netus nulla suscipit augue
dictumst penatibus imperdiet pretium. Nibh rhoncus tellus curae metus taciti orci id. Natoque luctus tempus dolor lectus
himenaeos dictumst. Montes molestie venenatis gravida facilisis justo dictum. Gravida pede mi dignissim ultrices
facilisi laoreet taciti dapibus tincidunt.

Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.
</p>
</div>

<div data-easy-popup='{"id": "popup-left-side", "theme": "left-side", "hasMobileLayout": "false"}'>
    <!-- Popup content -->
    <h2>Left side popup</h2>
    <p>Lorem ipsum dolor sit amet sem nibh. Natoque sit elit diam consequat nostra fames. Maecenas facilisi finibus si arcu nulla gravida metus congue facilisis hac. Primis turpis nullam sed aliquam eros in ultricies. Tristique interdum est tortor augue nullam morbi ante imperdiet metus. Nunc imperdiet massa aliquam sapien purus est vehicula sed congue habitant. Quisque suscipit sollicitudin tempus lorem ac viverra habitant nostra aliquam nec aenean.

Potenti ullamcorper sit tincidunt turpis molestie litora sapien. Amet dignissim turpis netus nulla suscipit augue
dictumst penatibus imperdiet pretium. Nibh rhoncus tellus curae metus taciti orci id. Natoque luctus tempus dolor lectus
himenaeos dictumst. Montes molestie venenatis gravida facilisis justo dictum. Gravida pede mi dignissim ultrices
facilisi laoreet taciti dapibus tincidunt.

Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.

</p>
</div>

<div data-easy-popup='{"id": "popup-right-side", "theme": "right-side", "hasMobileLayout": "false"}'>
    <!-- Popup content -->
    <h2>Right side popup</h2>
    <p>Lorem ipsum dolor sit amet sem nibh. Natoque sit elit diam consequat nostra fames. Maecenas facilisi finibus si arcu nulla gravida metus congue facilisis hac. Primis turpis nullam sed aliquam eros in ultricies. Tristique interdum est tortor augue nullam morbi ante imperdiet metus. Nunc imperdiet massa aliquam sapien purus est vehicula sed congue habitant. Quisque suscipit sollicitudin tempus lorem ac viverra habitant nostra aliquam nec aenean.

Potenti ullamcorper sit tincidunt turpis molestie litora sapien. Amet dignissim turpis netus nulla suscipit augue
dictumst penatibus imperdiet pretium. Nibh rhoncus tellus curae metus taciti orci id. Natoque luctus tempus dolor lectus
himenaeos dictumst. Montes molestie venenatis gravida facilisis justo dictum. Gravida pede mi dignissim ultrices
facilisi laoreet taciti dapibus tincidunt.

Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.

Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.

Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.

Ac lectus interdum auctor praesent quis. Mauris viverra purus blandit natoque suspendisse consectetuer scelerisque
letius. Arcu faucibus scelerisque id elit ullamcorper phasellus letius morbi inceptos pulvinar hac. Potenti magna sapien
nostra lorem libero curabitur.
</p>
</div>

<div data-easy-popup='{"id": "popup-corner-bottom-right", "theme": "corner" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-bottom-left", "theme": "corner", "cornerPosition":"bottom left " }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-top-right", "theme": "corner", "cornerPosition":"top right" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-top-left", "theme": "corner", "cornerPosition":"top left","closeButtonInnerText": "CLOSE" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>


<div data-easy-popup='{"id": "popup-corner-fade-bottom-right", "theme": "corner", "cornerFade":"true" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-fade-bottom-left", "theme": "corner", "cornerPosition":"bottom left", "cornerFade":"true"  }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-fade-top-right", "theme": "corner", "cornerPosition":"top right", "cornerFade":"true" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-corner-fade-top-left", "theme": "corner", "cornerPosition":"top left","closeButtonInnerText": "CLOSE", "cornerFade":"true" }'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>

<div data-easy-popup='{"id": "popup-custom-close", "closeButtonInnerText": "CLOSE"}'>
    <!-- Popup content -->
<h2>Ac lectus interdum auctor praesent quis</h2>  
<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
congue cubilia cursus.</p>
</div>