使用 JavaScript

我们也可以用使用JavaScript来打开和关闭Popups ,因此我们需要看一下相关的App方法:

$.popup(popup) - 打开 Popup

$.closeModal(popup) - 关闭 Popup

{% highlight html %}

Popup(JavaScript)

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

Popup 事件

Popup 和 Modals有一样的事件, 如果你需要在打开/关闭popup时使用JavaScript做一些事情的时候,这些事件会很有用。

事件 目标 描述
open Popup Element<div class="popup"> 当 Popup 开始打开动画时,事件将被触发。
opened Popup Element<div class="popup"> 当 Popup 完成打开动画时,事件将被触发。
close Popup Element<div class="popup"> 当 Popup 开始结束动画时,事件将被触发。
closed Popup Element<div class="popup"> 当 Popup 完成结束动画后,事件将被触发。
{% highlight html %}

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 %}

动态的 Popup

允许你调用相关的App方法时传递HTML内容来动态地创建Popup:

$.popup(popupHTML, removeOnClose) - 打开 Popup

{% highlight html %}

动态的 Popup

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