响应式CSS3动画jQuery模态插件 iziModal

当前位置：首页 > 网页特效 > 幻灯片 > 响应式CSS3动画jQuery模态插件 iziModal

响应式CSS3动画jQuery模态插件 iziModal

源码大小：56.93KB
所需积分：1积分
源码编号：19JP-3550
浏览次数：602次
最后更新：2023年06月25日
所属栏目：幻灯片

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

iziModal是一个简单、快速的jQuery插件，可以使用CSS3提供的过渡效果创建响应迅速、美观、高度可定制的模式窗口。

查看更多模态插件，网址：

前50个Modal jQuery插件

如何使用它:

1.要使用此插件，请确保包含iziModal.min.css和iziModal.min.js模式在网页上。

<link href="iziModal.min.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="iziModal.min.js"></script>

2.在网页上包含您选择的图标字体（可选）。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

3.将您的内容插入到一个DIV元素中，该元素的CSS类为“iziModal”。

<div id="modal-demo" class="iziModal">
  Custom content here
</div>

4.创建一个链接来切换模态。

<a href="#" class="trigger-link">Click Me</a>

5.使用选项初始化模态。

$("#modal-demo").iziModal({
  // options here
});

6.在网页上显示模态。

$(document).on('click', '.trigger-link', function (event) {
  event.preventDefault();
  $('#modal-demo').iziModal('open');
});

7.所有默认选项。下面列出的选项也可以通过数据iziModal optionName属性使用。

$("#modal-demo").iziModal({
  title: '',
  subtitle: '',
  headerColor: '#88A0B9',
  background: null,
  theme: '',  // light
  icon: null,
  iconText: null,
  iconColor: '',
  rtl: false,
  width: 600,
  top: null,
  bottom: null,
  borderBottom: true,
  padding: 0,
  radius: 3,
  zindex: 999,
  iframe: false,
  iframeHeight: 400,
  iframeURL: null,
  focusInput: true,
  group: '',
  loop: false,
  arrowKeys: true,
  navigateCaption: true,
  // Boolean, 'closeToModal', 'closeScreenEdge'
  navigateArrows: true, 
  history: false,
  restoreDefaultContent: false,
  // Boolean, Number
  autoOpen: 0, 
  bodyOverflow: false,
  fullscreen: false,
  openFullscreen: false,
  closeOnEscape: true,
  closeButton: true,
  appendTo: 'body', // or false
  appendToOverlay: 'body', // or false
  overlay: true,
  overlayClose: true,
  overlayColor: 'rgba(0, 0, 0, 0.4)',
  timeout: false,
  timeoutProgressbar: false,
  pauseOnHover: false,
  timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
  // comingIn, bounceInDown, bounceInUp, fadeInDown
  // fadeInUp, fadeInLeft, fadeInRight, flipInX
  // bounceInLeft, bounceInRight
  transitionIn: 'comingIn',   
  // comingOut, bounceOutDown, bounceOutUp, fadeOutDown
  // fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX
  // bounceOutLeft, bounceOutRight
  transitionOut: 'comingOut', 
  transitionInOverlay: 'fadeIn',
  transitionOutOverlay: 'fadeOut',
  // callback functions
  onFullscreen: function(){},
  onResize: function(){},
  onOpening: function(){},
  onOpened: function(){},
  onClosing: function(){},
  onClosed: function(){},
  afterRender: function(){}
});

8.API方法。

// Open
$('#modal-demo').iziModal('open');

// Close
$('#modal-demo').iziModal('close');

// Change to the opposite of the current state.
$('#modal').iziModal('toggle');

// Returns group information.
$('#modal').iziModal('getGroup');

// Set a new group name.
$('#modal').iziModal('setGroup', 'alerts');

// Skip to next modal to the same group.
$('#modal').iziModal('next');

// Skip to previous modal to the same group.
$('#modal').iziModal('prev');

// getState
/**
 * @returns {'closed'|'closing'|'opened'|'opening'}
 */
$('#modal-demo').iziModal('getState');

// startLoading
$('#modal-demo').iziModal('startLoading');

// stopLoading
$('#modal-demo').iziModal('stopLoading');

// Destroy
$('#modal-demo').iziModal('destroy');

// Start progress loading within the modal.
$('#modal').iziModal('startProgress');

// Pause progress loading within the modal.
$('#modal').iziModal('pauseProgress');

// ProgressResume progress loading within the modal.
$('#modal').iziModal('resumeProgress');

// Reset progress loading within the modal.
$('#modal').iziModal('resetProgress');

// setHeaderColor
$('#modal-demo').iziModal('setHeaderColor', 'color');

// setTitle
$('#modal-demo').iziModal('setTitle', 'Title');

// setSubtitle
$('#modal-demo').iziModal('setSubtitle', 'Subtitle');

// setIconClass
$('#modal-demo').iziModal('setIconClass', 'iconClass');

// Change the class of icon.
$('#modal').iziModal('setIcon', 'iconClass');

// Change the text of font icon.
$('#modal').iziModal('setIconText', 'icon');

// Change the z-index CSS attribute of the modal.
$('#modal').iziModal('setZindex', 999);

// Change the Modal opening transition.
$('#modal').iziModal('setTransitionIn', 'comingIn');

// Change the Modal closing transition.
// comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX
$('#modal').iziModal('setTransitionOut', 'comingOut');

// recalculateLayout
$('#modal-demo').iziModal('recalculateLayout');

// Set a new content to modal.
$('#modal').iziModal('setContent', '<p>Example</p>');

// Returns the default Modal content.
$('#modal').iziModal('resetContent');

9.事件。

// Opening
$(document).on('opening', '#modal-demo', function (e) {
    // ...
});

// Opened
$(document).on('opened', '#modal-demo', function (e) {
    // ...
});

// Closing
$(document).on('closing', '#modal-demo', function (e) {
    // ...
});

// Closed
$(document).on('closed', '#modal-demo', function (e) {
    // ...
});

// if is fuulscreen
$(document).on('fullscreen', '#modal-default', function (e, modal) {
   
  if(modal.isFullscreen){
      // Enabled
  } else {
      // Disabled
  }
});

// Capture when a modal opens and closes within a group.
$(document).on('iziModal-group-change', function (e, modal) {
  console.info(modal.in); // Modal that came in.
  console.info(modal.out); // Modal that came out.
});

更新日志：

v1.6.1 (2022-05-30)

安全补丁。

v1.6.0 (2022-05-23)

新-jQuery 3就绪
新-数据iziModal preventClose
新增-startProgress、pauseProgress、resumeProgress和resetProgress方法
新增-打开多个模式
NEW-arrowKeys选项可启用/禁用
新增-默认为“边框”
已修复Bug

v1.5.1（2018年01月06日）

添加：appendToOverlay选项
添加：afterRender选项
添加：setContent方法
添加：resetContent方法
修正：模式在一定时间后自动关闭
已修复：URL更改时模式自动关闭
已修复：全屏
固定：打开和关闭功能
已修复：模式哈希

v1.5.0 (2017-06-06)

新数据iziModalopen=“#modal”用于任何选择器-已实现
新borderBottom选项-已实施
不再需要模态的新Div标签-已实现
新的AMD支持-已实施
新的setFullscreen方法-已实现
新的setWidth方法-已实现
新的setTop和setBottom方法-已实现
新的关闭按钮选项-已实施
新的appendTo选项-已实现
新的静态余量（顶部和底部选项）-已实施
新命名空间-已实现
在flexbox布局中使用Modal时的新改进-已实施
BUG IE水平对齐（包括%）-固定
iOS上的BUG Scroll iframe-已修复
BUG隐藏导航箭头不起作用-已修复
BUG某些类型的数据属性不能正常工作-已修复
BUG与izToast动画不兼容-已修复
BUG方法setTransitionIn和setTransitionOut-已修复
BUG Modal在使用快捷箭头时关闭-已修复
BUG Modal在关闭时会丢失类-已修复
BUG Modal在关闭时失去选项RTL-已修复
BUG Modal如果没有ID，则会丢失引用-已修复

v1.4.2 (2017-02-10)

所有选项现在都可以通过数据iziModal optionName属性使用
修正了alt文本模式高度计算不准确的问题
修复了替换文本浅色主题应用不正确的问题
CSS更新
将命名空间添加到文档事件和窗口事件

v1.4.0 (2016-12-08)

RTL支持-已实施。
WAI-ARIA支持-已实施。
如果存在不属于模态的哈希，则会发生错误-已修复。
如果缺少“iziModal”类，它会破坏布局-已修复。
模态的垂直定位，有时应用不正确-已修复。
模态定位的转换行为不正确-已修复。
模态组导航无法正常工作如果任何模态被破坏-已修复。
转换此的浮点值$element.innerHeight（）转换为整数以防止错误

v1.3.3 (2016-09-06)

添加：文本图标支持（选项、数据属性和设置方法）。
修正了：alt文本历史记录在手机上始终处于活动状态。
已修复：alt-text无法同时实例化多个模态。

v1.3.2（2016年8月10日）

setGroup以设置新的组名称-已实现。
alt文本组选项在某些情况下有效-已修复。

v1.3.1 (2016-08-09)

iframe URL（通过类似点击的事件）不适用于附加子项-已修复。
带百分比的alt文本宽度不起作用-已修复。

v1.3.0（2016年8月04日）

历史支持。
具有标题和导航的组支持（数据iziModal组）。
方法next和prev将在组模式中使用。
选项循环和数据（数据iziModal循环）。
选项pauseOnHover（当您超时时）。
CSS中的其他转换和改进。
方法setTransitionIn和setTransitionOut。
数据iziModal transitionIn和数据iziModal transitionOut到触发器和模态。
radius选项、zindex选项和方法集zindex。
打开和关闭方法它们可以用于不同的动画。
data iziModal open=“模态id”。
数据iziModal标题、数据iziModal字幕和数据iziMode图标。
回调onResize和onFullscreen。
事件全屏和全局事件iziModal组更改。
带延迟的自动打开选项。
附加选项，顶部或底部。
方法的返回总是被覆盖-已修复。
全屏溢出和js结构中的其他小修复-已修复。

2016-07-22

JS更新。

2016-07-21

视网膜显示支持
修复：回调无法访问模态函数

2016-07-19

应用全屏的新功能
带有进度条的新超时功能

2016-07-14

关闭覆盖仅在第一时间起作用

2016-07-10

JS更新

预览截图

响应式CSS3动画jQuery模态插件 iziModal

相关热词： 插件模态 jQuery 动画 CSS3 响应 iziModal

上一篇：带渐变/滑动/翻转转换自动幻灯片放映 cb幻灯片放映js
下一篇：方便信息/确认模式对话框插件定时对话框

开发前端软件素材源码教程下载网站