当前位置：首页 > 网页特效 > 弹出层

iziModal-时尚炫酷的jQuery模态窗口插件

分类：弹出层日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入iziModal.min.css和jquery、iziModal.min.js文件。
```html
<link rel="stylesheet" href="iziModal.min.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="iziModal.min.js" type="text/javascript"></script>  
```                
#####  HTML结构
可以通过按钮或a元素来触发一个模态窗口。

```html

<a href="#" class="trigger">打开模态窗口</a>

<div id="modal">
    
</div>  
```           
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过iziModal()方法来初始化该模态窗口插件。

```html
$("#modal").iziModal();    
```              
或者也可以通过jqurey事件来打开模态窗口。

```html
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); // 需要带上 "this"
});  
```              
#####  Iframe
要在模态窗口中使用iframe功能，结构如下：

```html
<a href="http://www.htmleaf.com" class="trigger">打开模态窗口</a>    
```              
初始化：

```html
$("#modal").iziModal({
    iframe: true,
    iframeHeight: 800,
    iframeURL: "http://www.htmleaf.com"
});   
```             
或者也可以通过jquery事件来打开模态窗口。

```html
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); // 需要带上 "this"
});     
```           
#####  Ajax
iziModal模态窗口插件配置有Ajax功能。

```html
$("#modal").iziModal('open', function(modal){
      
    modal.startLoading();
  
    $.get('/path/to/file', function(data) {
        $("#modal .iziModal-content").html(data);
  
        modal.stopLoading();
    });
  
});       
```           
#####  配置参数
iziModal模态窗口插件的默认配置参数如下：

```html
$("#modal").iziModal({
    title: "",
    subtitle: "",
    theme: "",
    headerColor: "#88A0B9",
    overlayColor: "rgba(0, 0, 0, 0.4)",
    iconColor: "",
    iconClass: null,
    width: 600,
    padding: 0,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    overlayClose: true,
    closeOnEscape: true,
    bodyOverflow: false,
    focusInput: true,
    autoOpen: false,
    transitionInModal: 'transitionIn',
    transitionOutModal: 'transitionOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onOpening: function() {},
    onOpened: function() {},
    onClosing: function() {},
    onClosed: function() {}
});      
```            
| 参数  | 默认值  |  描述 |
| ------------ | ------------ | ------------ |
|  title |  "" |  模态窗口的标题。 |
||subtitle|""|模态窗口的子标题。|
|theme|""|模态窗口的主题，可以是空或"light"。|
|headerColor|#6d7d8d|模态窗口的头部颜色。|
|overlayColor|rgba(0,0,0,0.4)|遮罩层的颜色。|
|iconColor|""|头部图标的颜色。|
||iconClass|null|图标图标的class（你使用的字体图标的class名称）|
|width|600|模态窗口的固定宽度。你可以使用%, px, em 或 cm。如果不带单位，默认为像素。|
|padding|0|模态窗口的内边距。|
|iframe|false|是否在模态窗口中启用iframe功能。|
|iframeHeight|null|iframe的高度。|
|iframeURL|null|iframe加载内容的URL地址。如果没有设置，可以使用超链接的地址来作为URL地址。|
|overlayClose|true|是否允许点击模态窗口的外部来关闭模态窗口。|
|closeOnEscape|true|是否允许通过点击ESC键来关闭模态窗口。|
|bodyOverflow|false|强制在打开模态窗口时超出文档的内容被隐藏。|
|focusInput|true|设置为true时，当打开模态窗口时，第一个可见的表单域将被激活。|
|autoOpen|false|是否自动打开模态窗口。|
|transitionInModal|transitionIn|打开模态窗口的默认过渡动画。|
|transitionOutModal|transitionOut|关闭模态窗口的默认过渡动画。|
|transitionInOverlay|fadeIn|遮罩层打开时的过渡动画。|
|transitionOutOverlay|fadeOut|遮罩层关闭时的过渡动画。|
|onOpening|function() {}|模态窗口打开时的回调函数。|
|onOpened|function() {}|模态窗口打开后的回调函数。||
|onClosing|function() {}|模态窗口关闭时的回调函数。|
|onClosed|function() {}|模态窗口关闭后的回调函数。|
#####  方法
- $('#modal').iziModal();：初始化模态窗口。
- $('#modal').iziModal('open');：打开模态窗口。
- $('#modal').iziModal('close');：关闭模态窗口。
- $('#modal').iziModal('getState');：获取模态窗口的状态，返回：{'closed'|'closing'|'opened'|'opening'}。
- $('#modal').iziModal('startLoading');：开启模态窗口中的加载进度指示器。
- $('#modal').iziModal('stopLoading');：关闭模态窗口中的加载进度指示器。
- $('#modal').iziModal('destroy');：销毁模态窗口。
- $('#modal').iziModal('setHeaderColor', 'color');：设置模态窗口头部的背景颜色。
- $('#modal').iziModal('setTitle', 'Title');：设置模态窗口的标题。
- $('#modal').iziModal('setSubtitle', 'Subtitle');：设置模态窗口的子标题。
- $('#modal').iziModal('setIconClass', 'iconClass');：设置模态窗口的图标。
- $('#modal').iziModal('recalculateLayout');：重新计算模态窗口的尺寸和位置。
#####  事件
Opening：在模态窗口打开时触发。
```html
$(document).on('opening', '#modal', function (e) {
    //console.log('Modal is opening');
});
```
Opened：在模态窗口打开之后触发。
```html
$(document).on('opened', '#modal', function (e) {
    //console.log('Modal is opened');
});
```
Closing：在模态窗口关闭时触发。
```html
$(document).on('closing', '#modal', function (e) {
    //console.log('Modal is closing');
});
```
Closed：在模态窗口关闭之后触发。
```html
$(document).on('closed', '#modal', function (e) {
    // console.log('Modal is closed');
});
```

web299.com

iziModal-时尚炫酷的jQuery模态窗口插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果