iziModal是一个简单、快速的jQuery插件,可以使用CSS3提供的过渡效果创建响应迅速、美观、高度可定制的模式窗口。
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)
v1.5.1(2018年01月06日)
v1.5.0 (2017-06-06)
v1.4.2 (2017-02-10)
v1.4.0 (2016-12-08)
v1.3.3 (2016-09-06)
v1.3.2(2016年8月10日)
v1.3.1 (2016-08-09)
v1.3.0(2016年8月04日)
2016-07-22
2016-07-21
2016-07-19
2016-07-14
2016-07-10
Â