這是一款jQuery炫酷全屏模態(tài)窗口插件。該插件通過和animate.css結(jié)合使用，可以制作多種打開全屏模態(tài)窗口的炫酷過渡動(dòng)畫效果。

使用方法

在頁(yè)面中引入animate.min.css、jquery和animatedModal.js文件。

HTML結(jié)構(gòu)

通過下面的HTML結(jié)構(gòu)來創(chuàng)建一個(gè)模態(tài)窗口。

關(guān)閉模態(tài)框

然后添加一個(gè)用于觸發(fā)模態(tài)窗口的按鈕。

demo1

初始化插件

在頁(yè)面DOM元素加載完畢之后，通過下面的方法來初始化該全屏模態(tài)窗口插件。

$("#demo01").animatedModal();

配置參數(shù)

該jQuery全屏模態(tài)窗口插件的可用配置參數(shù)如下：

參數(shù)

默認(rèn)值

選項(xiàng)

描述

color

#39BEB9

HEX, HSL, RGB, RBA

模態(tài)窗口的背景顏色

animatedIn

zoomIn

可以在 這里 選擇

打開模態(tài)窗口時(shí)的過渡動(dòng)畫

animatedOut

zoomOut

可以在 這里 選擇

關(guān)閉模態(tài)窗口時(shí)的過渡動(dòng)畫

animationDuration

.6s

seconds

過渡動(dòng)畫的持續(xù)時(shí)間

overflow

auto

scroll; hidden; auto;

當(dāng)內(nèi)容溢出時(shí)，模態(tài)窗口是否可以滾動(dòng)

回調(diào)函數(shù)

該jQuery全屏模態(tài)窗口插件的可用回調(diào)函數(shù)如下：

$("#demo01").animatedModal({

animatedIn:'lightSpeedIn',

animatedOut:'bounceOutDown',

color:'#3498db',

// 回調(diào)函數(shù)

beforeOpen: function() {

console.log("The animation was called");

},

afterOpen: function() {

console.log("The animation is completed");

},

beforeClose: function() {

console.log("The animation was called");

},

afterClose: function() {

console.log("The animation is completed");

}

});

總結(jié)

以上是生活随笔為你收集整理的html5弹窗全屏,jQuery炫酷全屏模态窗口插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。