iziModal模态框使用说明

iziModal 是一个基于 jQuery 的轻量级、响应式模态框插件，以其优雅的动画效果和高度可定制性受到开发者欢迎。‌

官方网址：https://marcelodolza.github.io/iziModal/#

下载地址：https://github.com/marcelodolza/iziModal/archive/master.zip

使用实例：

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

<!-- Modal structure -->
<div id="modal"> <!-- data-iziModal-fullscreen="true"  data-iziModal-title="Welcome"  data-iziModal-subtitle="Subtitle"  data-iziModal-icon="icon-home" -->
    <!-- Modal content -->
</div>
 
<!-- Trigger to open Modal -->
<a href="https://github.com/marcelodolza/iziModal" class="trigger">Modal</a>

<script>
//打开
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    // $('#modal').iziModal('setZindex', 99999);
    // $('#modal').iziModal('open', { zindex: 99999 });
    $('#modal').iziModal('open');
});
//或是在标签上打开
//<a href="#" data-izimodal-open="#modal" data-izimodal-transitionin="fadeInDown">Modal</a>
</script>

<!--  The attr 'data-iziModal-preventClose' will allow the already open modal is not closed.-->
 
<a href="#" data-izimodal-open="#another-modal" data-izimodal-zindex="20000" data-izimodal-preventclose="">Another Modal</a>
 
<!-- You can also use: data-iziModal-transitionOut="fadeOutDown" without data-iziModal-preventClose -->

======================================
打开Iframe
<a href="http://izimodal.marcelodolza.com" class="trigger">Modal</a>
<!-- or -->
<button data-izimodal-iframeurl="http://..." data-izimodal-open="#modal-iframe">Modal</button>

$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal-iframe').iziModal('open')
    // or
    $('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});

$("#modal-iframe").iziModal({
    iframe: true,
    iframeHeight: 800,
    iframeURL: "http://izimodal.marcelodolza.com"
});

======================================
异步Ajax
$("#modal").iziModal({
    onOpening: function(modal){
        modal.startLoading();
        $.get('/path/to/file', function(data) {
            $("#modal .iziModal-content").html(data);
            modal.stopLoading();
        });
    }
});

参数调用示例
===============================
var modal = $('#modal').iziModal();
// then you can use:
// modal.iziModal('open');
===============================
$('#modal').iziModal('open');
 
// or with a specific transition of entry.
 
$('#modal').iziModal('open', {
    transition: 'fadeInDown' // Here transitionIn is the same property.
});
 
// or with a specific transition of entry and output.
 
$('#modal').iziModal('open', {
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown' // TransitionOut will be applied if you have any open modal.
});
===============================
$('#modal').iziModal('close');
 
// or with a specific transition of output.
 
$('#modal').iziModal('close', {
    transition: 'bounceOutDown' // Here transitionOut is the same property.
});
===============================
$('#modal').iziModal('toggle');
===============================
/**
 * @returns {'closed'|'closing'|'opened'|'opening'}
 */
$('#modal').iziModal('getState');
===============================
$('#modal').iziModal('getGroup');
===============================
$('#modal').iziModal('setGroup', 'alerts');
===============================
$('#modal').iziModal('setContent', '<p>Example</p>');
 
// And you can keep this new content by default.
 
$("#modal").iziModal('setContent', {
    content: '<p>Example</p>',
    default: true
})
===============================
$('#modal').iziModal('resetContent');
===============================
$('#modal').iziModal('next');
 
// or with a specific transition of output.
 
$('#modal').iziModal('next' ,{
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown'
});
===============================
$('#modal').iziModal('prev');
 
// or with a specific transition of output.
 
$('#modal').iziModal('prev' ,{
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown'
});
===============================
$('#modal').iziModal('startLoading');
$('#modal').iziModal('stopLoading');
===============================
$('#modal').iziModal('startProgress');
$('#modal').iziModal('pauseProgress');
$('#modal').iziModal('resumeProgress');
$('#modal').iziModal('resetProgress');
===============================
$('#modal').iziModal('destroy');
===============================
$('#modal').iziModal('setWidth', 800); // '800px', 100%, '100vw'...
$('#modal').iziModal('setTop', 100);
$('#modal').iziModal('setBottom', 100);
$('#modal').iziModal('setHeader', false);
$('#modal').iziModal('setHeaderColor', 'color');
$('#modal').iziModal('setBackground', 'black');
$('#modal').iziModal('setTitle', 'Title');
$('#modal').iziModal('setSubtitle', 'Subtitle');
$('#modal').iziModal('setIcon', 'iconClass');
$('#modal').iziModal('setIconText', 'icon');
$('#modal').iziModal('setZindex', 999);
$('#modal').iziModal('setFullscreen', true);
===============================
$('#modal').iziModal('setTransitionIn', 'comingIn');
// comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
===============================
$('#modal').iziModal('setTransitionOut', 'comingOut');
// comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX
===============================
$(document).on('opening', '#modal', function (e) {
    //console.log('Modal is opening');
});
===============================
$(document).on('opened', '#modal', function (e) {
    //console.log('Modal is opened');
});
===============================
$(document).on('closing', '#modal', function (e) {
    //console.log('Modal is closing');
});
===============================
$(document).on('closed', '#modal', function (e) {
    // console.log('Modal is closed');
});
===============================
$(document).on('fullscreen', '#modal-default', function (e, modal) {
     
    if(modal.isFullscreen){
        // Enabled
    } else {
        // Disabled
    }
});
===============================
$(document).on('iziModal-group-change', function (e, modal) {
    console.info(modal.in); // Modal that came in.
    console.info(modal.out); // Modal that came out.
});

参数设置：

$("#modal").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,
    navigateArrows: true, // Boolean, 'closeToModal', 'closeScreenEdge'
    history: false,
    restoreDefaultContent: false,
    autoOpen: 0, // Boolean, Number
    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)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    onOpening: function(){},
    onOpened: function(){},
    onClosing: function(){},
    onClosed: function(){},
    afterRender: function(){}
});