带CSS3过渡效果的js模态窗口插件 A Modal Window Effects with transitions CSS3

jQuery之家 返回下载页
Effects
Fadein Slide custom animation Newspaper Fall Sidefall Blur updated Flip custom animation Sign Superscaled Slit Rotate custom animation Letmein updated Makeway updated Slip updated Corner new Slide together new Scale new Door new Push new Content scale new

关于该模态窗口插件:

这个模态窗口插件使用原生javascript制作，它也可以和jQuery完美的结合。

请注意：这些模态窗口动画仅仅工作在支持各自CSS3属性的浏览器上。Internet Explorer 8 和 9需要legacy.min.js的支持，但是没有动画效果。

点击右边的列表查看效果

Modern browsers only!

How to use:

1) Include custombox.min.js code:

In just about every case, it's best to place all your script references at the end of the page, just before: </body>.

<script src="custombox.min.js"></script>

2) Include custombox.min.css code:

Insert it in the section of your HTML document, after: <html>.

<link rel="stylesheet" href="custombox.min.css">

3) Call the plugin when the body is on load:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('element').addEventListener('click', function ( e ) {
            Custombox.open({
                target: '#modal',
                effect: 'fadein'
            });
            e.preventDefault();
        });
    });
</script>
<script>
    $(function () {
        $('#element').on('click', function ( e ) {
            Custombox.open({
                target: '#modal',
                effect: 'fadein'
            });
            e.preventDefault();
        });
    });
</script>

Support for old browsers:

Add the script just before: <script src="custombox.min.js"></script>.

<script src="legacy.min.js"></script>

Options (click on the rows for see a demo)

Name Type Property Description
target string null Set the URL, ID or Class.
id string | number null Set the ID for the modal.
cache boolean false If set to false, it will force requested pages not to be cached by the browser only when send by AJAX.
escKey boolean true Allows the user to close the modal when press escape key.
zIndex string | number auto Overlay z-index: Auto or number.
overlay boolean true Show the overlay.
overlayColor string #000 Overlay color.
overlayOpacity number 0.8 The overlay opacity level. Range: 0 to 1.
overlayClose boolean true Allows the user to close the modal by clicking the overlay.
overlaySpeed number 300 Sets the speed of the overlay, in milliseconds.
overlayEffect string auto Combine any of the effects.
width number | null null Set a fixed total width.
effect string fadein fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | corner | slidetogether | scale | door | push | contentscale.
position string center, center Set position of modal. First position 'x': left, center and right. Second position 'y': top, center, bottom.
animation string | null null Only with effects: slide or rotate (top, right, bottom, left and center) and flip (vertical or horizontal). Output position separated by commas.
speed number 600 Sets the speed of the transitions, in milliseconds.

Events

Event Type Description
open Callback that fires right before begins to open.
complete Callback that fires right after loaded content is displayed.
close Callback that fires once is closed.

Methods

Name Type Property Description
open - - Open Custombox.
close string | number last Close Custombox.
custombox.open - - Invoke the open method.
custombox.complete - - Invoke the complete method.
custombox.close - - Invoke the close method.

小技巧

- 无限连续打开模态窗口: example.

Example

Custombox.open({
    target: 'demo/xhr/ajax.html'
}); Custombox.open({
    target: '#modal',
    id:     'modal123'
}); Custombox.open({
    target: 'demo/xhr/ajax.html',
    cache:  true
}); Custombox.open({
    target: '#modal',
    escKey: false
}); Custombox.open({
    target: '#modal',
    zIndex: 9999
}); Custombox.open({
    target:  '#modal',
    overlay: false
}); Custombox.open({
    target:       '#modal',
    overlayColor: '#00F'
}); Custombox.open({
    target:        '#modal',
    overlayOpacity: 0.2
}); Custombox.open({
    target:        '#modal',
    overlayClose: false
}); Custombox.open({
    target:       '#modal',
    overlaySpeed: 1200
}); Custombox.open({
    target:        '#modal',
    overlayEffect: 'makeway'
}); Custombox.open({
    target: '#modal',
    width:  1200
}); Custombox.open({
    target: '#modal',
    effect: 'newspaper'
}); Custombox.open({
    target:   '#modal',
    effect:   'fadein',
    position: 'center, top'
}); Custombox.open({
    target:   '#modal',
    effect:   'slide',
    animation: 'top, bottom'
}); Custombox.open({
    target: '#modal',
    speed:  1200
}); Custombox.open({
    target: '#modal',
    open:   function () {
        alert('open');
    }
}); Custombox.open({
    target:    '#modal',
    complete:   function () {
        alert('complete');
    }
}); Custombox.open({
    target:  '#modal',
    close:   function () {
        alert('close');
    }
}); Custombox.open({
    target:  '#modal'
}); Custombox.close('first'); document.addEventListener( 'custombox.open',
function () {     alert('open');
}, false); document.addEventListener( 'custombox.complete',
function () {     alert('complete');
}, false); document.addEventListener( 'custombox.close',
function () {     alert('close');
}, false);