使用 JavaScript
我们也可以用使用JavaScript来打开和关闭Popups ,因此我们需要看一下相关的App方法:
$.popup(popup)
- 打开 Popup
popup - HTML元素 或者 字符串 (需要打开的popup的 CSS 选择器)
. 必需
$.closeModal(popup)
- 关闭 Popup
popup - HTML元素 或者 字符串 (需要打开的popup的 CSS 选择器)
. 可选. 如果没有设置这个值,任何打开着的Popup/Modal 都将被关闭
{% highlight html %}
...
{% 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 %}
...
{% 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
popupHTML
- string. popup的HTML字符串
removeOnClose
- boolean. 可选, 默认 - true. 如果是 true, 那么 Popup 在关闭时将从DOM中移除
{% highlight html %}
...
{% endhighlight %}
{% highlight js %}
$(document).on('click','.create-popup', function () {
var popupHTML = ''
$.popup(popupHTML);
});
{% endhighlight %}