Popup

Popup is a popup window with any HTML content that pops up over App's main content

Popup

Popup layout is pretty simple. All you need to do is to put .popup right in the body:

{% highlight html %}

Note! Don't put popup into page.

{% endhighlight %}

Open and Close Popup

From HTML

It is possible to open and close required popups using special classes and data attributes on links:

To open popup we need to add open-popup class to any HTML element (prefered to link)
To close popup we need to add close-popup class to any HTML element (prefered to link)
If you have more than one popups in app, you need to specify appropriate popup via additional data-popup=".my-popup" attribute on this HTML element

According to above note:

{% highlight html %}

...

Open About Popup

Open Services Popup

...

{% endhighlight %}

Using JavaScript

We can also open and close Popups with JavaScript, for this we need to look at related App methods:

$.popup(popup) - Open Popup

popup - HTMLElement or string (with CSS Selector) of Popup to open . Required

$.closeModal(popup) - Close Popup

popup - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Popup/Modal will be closed

{% highlight html %}

Popup(JavaScript)

...

Open About Popup

Open Services Popup

{% endhighlight %} {% highlight js %} $(document).on('click','.open-about', function () { $.popup('.popup-about'); }); $(document).on('click','.open-services', function () { $.popup('.popup-services'); }); {% endhighlight %}

Popup Events

Popup has the same events as Modals, they could be useful when you need to do something in JavaScript when Popup opened/closed

Event	Target	Description
open	Popup Element<div class="popup">	Event will be triggered when Popup starts its opening animation
opened	Popup Element<div class="popup">	Event will be triggered after Popup completes its opening animation
close	Popup Element<div class="popup">	Event will be triggered when Popup starts its closing animation
closed	Popup Element<div class="popup">	Event will be triggered after Popup completes its closing animation

Open About Popup

Open Services Popup

{% highlight html %}

Popup Events

...

Open About Popup

Open Services Popup

{% endhighlight %} {% highlight js %} $(document).on('click','.popup-about', function () { console.log('About Popup opened') }); $(document).on('click','.popup-about', function () { console.log('About Popup is closing') }); $(document).on('click','.popup-services', function () { console.log('Services Popup is opening') }); $(document).on('click','.popup-services', function () { console.log('Services Popup is closed') }); {% endhighlight %}

Dynamic Popup

Light7 allows you to create Popup dynamically by passing its HTML to related methods:

$.popup(popupHTML, removeOnClose) - Open Popup

popupHTML - string. HTML String of popup
removeOnClose - boolean. Optional, by default - true. If true then Popup will be removed from DOM when closed

Create Popup

{% highlight html %}

Dynamic Popup

...

Create Popup

{% endhighlight %} {% highlight js %} $(document).on('click','.create-popup', function () { var popupHTML = '' $.popup(popupHTML); }); {% endhighlight %}