MODALit.js 模态弹出层插件，支持图片文字视频弹出，自定义性强-BFW插件库

MODALit.js 模态弹出层插件，支持图片文字视频弹出，自定义性强
支持从不同的位置和不同的特效弹出
支持左侧导航条弹出
支持滚动检测弹出
支持自定义样式
第一步引入bfwone
第二步执行modelit插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["MODALit.min", "MODALit.min"], function() {
                _init();
            });
        });
        function _init() {

            // Transition
            new MODALit({
                el: '.demo-transition',
                title: 'Transition',
                action: {
                    label: 'Close'
                }
            });

            // Position
            new MODALit({
                el: '.demo-position',
                title: 'Position',
                action: {
                    label: 'Close'
                },
                transition: 'zoom'
            });

            // Sizes
            new MODALit({
                el: '.demo-size',
                title: 'Sizes',
                footer: 'false',
                action: {
                    label: 'Close'
                },
                transition: 'zoom'
            });

            // Media
            new MODALit({
                el: '.demo-media',
                footer: false,
                transition: 'zoom'
            });

            // Gallery
            new MODALit({
                el: '.demo-gallery',
                slider: true,
                width: 'large',
                navi: true,
                footer: false,
                transition: 'zoom'
            });

            // Confirm
            new MODALit({
                el: '.demo-confirm',
                title: 'Confirm',
                content: 'Are you sure?',
                action: {
                    fn: function () {
                        alert('Actioned!');
                    }
                },
                cancel: {
                    fn: function () {
                        alert('Canceled!');
                    }
                },
                width: 'small',
                transition: 'zoom'
            });

            // Nested
            new MODALit({
                el: '#btn-nested1',
                footer: false,
                width: 'full',
                target: '#nested',
                transition: 'zoom'
            });
            new MODALit({
                el: '#btn-nested2',
                title: 'Nested Dialog',
                content: 'Are you satisfied with this?',
                transition: 'slideUp'
            });

            // Body Scrolling - prevent
            new MODALit({
                el: '#prevent',
                title: 'Try to scroll down the page!',
                content: 'Prevent body scrolling. (default)',
                transition: 'zoom'
            });
            // Body Scrolling - scrollable
            new MODALit({
                el: '#scrollable',
                title: 'Try to scroll down the page!',
                content: 'Scrollable body.',
                fixed: false,
                transition: 'zoom'
            });

            // Backdrop
            new MODALit({
                el: '#overlay',
                title: 'Disabled backdrop <small class="meta">(Background overlay)</small>',
                content: 'Click the Esc key!',
                transition: 'slideUp',
                backdrop: false
            });

            // Custome Style
            var css = new MODALit({
                el: '#btnCss',
                width: 'small',
                content: '<p>Dou you like it?</p>',
                action: {
                    fn: function () {
                        alert('Thanks!')
                        this.hide()
                    },
                    label: 'Like'
                },
                cancel: {
                    label: 'Dislike',
                    fn: function () {
                        alert('Ooops..');
                    }
                },
                transition: 'flip'
            })
            css.modal.id = "modalCss";

            // Login form
            var form = document.forms.login,
            animationName = function () {
                var div = document.createElement("div"),
                obj = {
                    "animation": "animationend",
                    "OAnimation": "oAnimationEnd",
                    "MozAnimation": "animationend",
                    "MsAnimation": "msAnimationEnd",
                    "WebkitAnimation": "webkitAnimationEnd"
                },
                names = Object.keys(obj),
                len = names.length;

                for (var i = 0; i < len; i++) {
                    if (div.style[names[i]] !== undefined) {
                        return obj[names[i]];
                    }
                }
                return null;
            },
            animationEnd = animationName(),
            invalid = {},
            error = function (e) {
                var classie = e.firstElementChild.classList;
                classie.add('error');
                if (animationEnd) {
                    e.addEventListener(animationEnd, function (evt) {
                        classie.remove('error');
                    });
                } else {
                    setTimeout(function () {
                        classie.remove('error');
                    }, 400);
                }
            },
            action = function (e) {
                ['id', 'pswd'].forEach(function (name) {
                    var ipt = form[name],
                    classie = ipt.classList;
                    if ((name === 'id' && ipt.value !== 'admin') || (name === 'pswd' && ipt.value !== '1234')) {
                        classie.remove('valid');
                        classie.add('invalid');
                        invalid[name] = true;
                    } else {
                        classie.add('valid');
                        classie.remove('invalid');
                        delete invalid[name];
                    }
                });

                if (Object.keys(invalid).length) {
                    return error(this.modal);
                }
                alert('Success!');
                this.hide();
                cancel();
            },
            cancel = function () {
                [form.id, form.pswd].forEach(function (e) {
                    e.classList.remove('valid');
                    e.classList.remove('invalid');
                });
                form.reset();
            },
            login = new MODALit({
                el: '#btnLogin',
                action: {
                    fn: action,
                    label: 'Login'
                },
                cancel: {
                    fn: cancel
                },
                dismiss: {
                    backdrop: false
                },
                transition: 'zoom'
            });

            // Sidebar
            var sidebar = new MODALit({
                el: '#btnNav',
                width: 'full',
                title: 'MENU',
                content: '<ul><li><a href="#">HOME</a></li><li><a href="#">PRODUCTS</a></li><li><a href="#">ABOUT</a></li><li><a href="#">CONTACT</a></li></ul>',
                position: 'left top',
                footer: false,
                backdrop: false,
                transition: 'slideRight'
            });
            sidebar.modal.id = 'sidebar';

            // Scroll
            var scrl = new MODALit({
                target: '#scroller',
                backdrop: false,
                position: 'right bottom',
                cancel: {
                    fn: function () {
                        this.view = true;
                    }
                },
                transition: 'slideUp'
            }),
            pos = 0,
            timer = null,
            ofs = function () {
                var rect = document.getElementById('scroll').getBoundingClientRect();
                pos = rect.top + rect.height + window.pageYOffset - window.innerHeight + 100;
            },
            _onScroll = function () {
                if (!scrl.view) {
                    var scrlTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                    hidden = scrl.modal.getAttribute('aria-hidden');
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        if (scrlTop > pos) {
                            hidden === 'true' && scrl.show(scrl.modal);
                        } else {
                            hidden === 'false' && scrl.hide();
                        }
                    }, 50)
                }
            };
            ofs();
            window.addEventListener('resize', ofs);
            window.addEventListener('scroll', _onScroll);
        }
    </script>
</head>
<body>
    <section id="demo">
        <div class="container features align center">
            <h2>DEMO</h2>
            <div class="demo">
                <h3>Transition</h3>
                <ul>
                    <li><button type="button" class="btn demo-transition" data-content="Zoom" data-transition="zoom">Zoom</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Flip" data-transition="flip">Flip</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Left" data-transition="slideLeft">Slide Left</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Right" data-transition="slideRight">Slide Right</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Up" data-transition="slideUp">Slide Up</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Down" data-transition="slideDown">Slide Down</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Position</h3>
                <ul>
                    <li><button type="button" class="btn demo-position" data-content="Default" data-transition="zoom">Default</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Left" data-position="left" data-transition="slideRight">Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Right" data-position="right" data-transition="slideLeft">Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top" data-position="top" data-transition="slideDown">Top</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom" data-position="bottom" data-transition="slideUp">Bottom</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Right" data-position="right top" data-transition="slideDown">Top Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Left" data-position="left top" data-transition="slideDown">Top Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Right" data-position="right bottom" data-transition="slideUp">Bottom Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Left" data-position="left bottom" data-transition="slideUp">Bottom Left</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Sizes</h3>
                <ul>
                    <li><button type="button" class="btn demo-size" data-width="small" data-content="Small dialog">Small</button></li>
                    <li><button type="button" class="btn demo-size" data-width="large" data-content="Large dialog">Large</button></li>
                    <li><button type="button" class="btn demo-size" data-width="full" data-footer="" data-transition="slideDown" data-content="Fullscreen dialog">Full</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Media</h3>
                <ul>
                    <li><button type="button" class="btn demo-media" data-src="https://source.unsplash.com/k8OCHhEymME" data-caption="<a href='https://unsplash.com/@nativemello?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> ian dooley</a>">Image</button></li>
                    <li><button type="button" class="btn demo-media" data-src="https://www.youtube.com/watch?v=rmf54oNI6ts">Youtube</button></li>
                    <li><button type="button" class="btn demo-media" data-title="Bacon Ipsum" data-src="//baconipsum.com/api/?type=all-meat¶s=3&start-with-lorem=1&format=html">Ajax</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Gallery</h3>

                <ul>
                    <li><img data-src="https://source.unsplash.com/5i8l46zW8do" src="https://source.unsplash.com/5i8l46zW8do/200x200" data-caption="<a href='https://unsplash.com/@brunels_world?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Brunel Johnson</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/2o_2syCZS5M" src="https://source.unsplash.com/2o_2syCZS5M/200x200" data-caption="<a href='https://unsplash.com/@matheusferrero?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Matheus Ferrero</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/ilPwXo3qhEo" src="https://source.unsplash.com/ilPwXo3qhEo/200x200" data-caption="<a href='https://unsplash.com/@ilyayakover?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Ilya Yakover</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/tcgMBsW4zlU" src="https://source.unsplash.com/tcgMBsW4zlU/200x200" data-caption="<a href='https://unsplash.com/@karishea?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Kari Shea</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/dI9KhXi0ooE" src="https://source.unsplash.com/dI9KhXi0ooE/200x200" data-caption="<a href='https://unsplash.com/@osmanrana?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Osman Rana</a>" class="demo-gallery"></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Confirm</h3>
                <p>
                    <button type="button" class="btn demo-confirm">Confirm</button>
                </p>
            </div>
            <div class="demo">
                <h3>Nested</h3>
                <p>
                    <button type="button" id="btn-nested1" class="btn">Nested</button>
                </p>
            </div>
            <div class="demo">
                <h3>Body Scrolling</h3>
                <ul>
                    <li><button id="prevent" type="button" class="btn">Prevent</button></li>
                    <li><button id="scrollable" type="button" class="btn">Scrollable</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Backdrop</h3>
                <p>
                    <button id="overlay" type="button" class="btn">Disable</button>
                </p>
            </div>

        </div>
    </section>

    <section id="customize">
        <div class="container features align center">

            <h2>Customize</h2>
            <div class="demo">
                <h3>CSS</h3>
                <p>
                    <button id="btnCss" type="button" class="btn">Custom Style</button>
                </p>
            </div>

            <div class="demo">
                <h3>Form</h3>
                <p>
                    <button id="btnLogin" type="button" data-target="#login" class="btn">Login</button><br><small>( ID:admin / PASS:1234 )</small>
                </p>
            </div>
            <div class="demo">
                <h3>Navigation</h3>
                <p>
                    <button id="btnNav" type="button" class="btn">Sidebar</button>
                </p>
            </div>
            <div class="demo">
                <h3>Scroll</h3>
                <div id="scroll">
                    <p>
                        Scroll down the page, the popup would be appear at the right side corner.
                    </p>
                    <p class="icon arrow"></p>
                </div>

            </div>

        </div>
    </section>


    <footer id="footer">
        <div class="container align center">
            <p>
                <small><a href="https://knot-design.jp/en/">© 2017 Copyright Knot Design</a></small>
            </p>
        </div>
    </footer>

    <div id="login" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Login</h3>
            </header>
            <form class="content" name="login">
                <p>
                    <label>
                        <input type="text" name="id" class="validate" required>
                        <span class="label">ID</span>
                    </label>
                    <label>
                        <input type="password" name="pswd" class="validate" required>
                        <span class="label">PASS</span>
                    </label>
                </p>
            </form>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn light">Cancel</button>
                    <button type="button" data-modal-btn="action" class="btn primary">Login</button>
                </p>
            </footer>
        </div>
    </div>


    <div id="scroller" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Scrolling Popup</h3>
            </header>
            <div class="content">

                <p>
                    In the future, do not show this popup.
                </p>
            </div>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn primary">Yep!</button>
                </p>
            </footer>
        </div>
    </div>

    <div id="nested" class="modalit" aria-hidden="true">
        <div class="dialog">
            <div class="content">
                <p>
                    <button id="btn-nested2" type="button" class="btn primary">Try to click!</button>
                </p>
            </div>
            <span data-modal-btn="dismiss"></span>
        </div>
    </div>

</div>

<style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        font-size: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-overflow-scrolling: touch;
        font-family: 'Saira Semi Condensed', sans-serif;
    }

    body {
        position: relative;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.42857143;
        color: #222;
        background-color: #fff;
    }
@media (max-width: 600px) {
        body {
            font-size: 1rem;
        }
    }

@media (min-width: 768px) {
        body {
            font-size: 1.1rem;
        }
    }

@media (min-width: 992px) {
        body {
            font-size: 1.2rem;
        }
    }

    h1,
    h2,
    h3 {
        font-weight: 600;
    }

    h2 {
        font-size: 4em;
        color: #444;
    }

    h2:first-letter {
        color: rgb(26, 182, 255);
    }

    h2:after {
        display: block;
        content: "";
        width: 60px;
        height: 5px;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, .12);
    }

    h3 {
        font-weight: 600;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin: 0 0 .8em;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    img {
        border: none;
        max-width: 100%;
        height: auto;
    }

    button,
    input {
        line-height: inherit;
    }

    section {
        padding: 0;
        margin: 0;
    }

    /* --
       forms
               -- */

    input:not([type]),
    input[type=text],
    input[type=email],
    input[type=password] {
        margin: 0;
        outline: 0;
        width: 100%;
        tap-highlight-color: rgba(255, 255, 255, 0);
        font-size: 1rem;
        font-weight: 400;
        padding: .5rem 0;
        line-height: 1.32857143;
        background: #FFF;
        border: none;
        border-bottom: 1px solid rgba(34, 36, 38, .15);
        color: rgba(0, 0, 0, .87);
        -webkit-box-shadow: 0 0 0 0 transparent inset;
        box-shadow: 0 0 0 0 transparent inset;
        -webkit-transition: all .5s;
        transition: all .5s;
        display: block;
        border-radius: 0;
    }

    .labelin {
        position: relative;
        padding-top: 1em;
    }

    label {
        position: relative;
        display: block;
        padding-top: 20px;
    }

    label .label {
        position: absolute;
        top: 30px;
        -webkit-transition: all .3s;
        transition: all .3s;
        font-size: 1rem;
    }

    label input:focus+.label,
    label input:valid+.label {
        top: 4px;
        font-size: .86rem;
    }

    label input:focus+.label {
        color: #26a69a;
    }

    label input.invalid {
        border-color: #f93671;
    }

    label input.valid {
        border-color: #4CAF50;
    }

    label input:focus {
        border-color: #26a69a;
    }

    form p {
        margin: 0;
    }


    /* --
       button
               -- */

    .btn {
        outline: 0;
        margin: 0 .25em .25em;
        position: relative;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 0;
        font-size: .9rem;
        font-weight: 400;
        padding: .72em 1.2em;
        font-family: inherit;
        line-height: 1.32857143;
        border-radius: .2em;
        background: #fff;
        color: inherit;
        -webkit-transition: .4s ease-out;
        transition: .4s ease-out;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    }

    .btn.primary {
        background: #333;
        color: #fff;
        text-shadow: none;
    }


    /* --
       layout
               -- */

    .container {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0 15px;
        -webkit-overflow-scrolling: touch;
    }

@media (max-width: 768px) {
        .container {
            width: 90%;
        }
    }

@media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }

@media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }

@media (min-width: 1400px) {
        .container {
            width: 1300px;
        }
    }


    .align.center {
        text-align: center;
    }


    /* --
       contents
               -- */

    .features {
        padding: 4rem 0;
    }

    .features p {
        line-height: 1.2;
        color: rgba(0, 0, 0, .5);
    }

    .demo {
        margin: 3rem 0;
    }

    .demo ul {
        list-style-type: none;
        padding: 0;
    }

    .demo li {
        display: inline-block;
    }

    .demo .btn {
        color: currentColor;
        border-radius: 2em;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, .7);
        border: #ddd 1px solid;
    }

    .demo .btn:hover {
        color: #fff;
        background-color: #333;
        border-color: #333;
    }

    .demo .btn.active {
        color: #fff;
        background-color: rgb(26, 182, 255);
        border-color: rgb(26, 182, 255);
    }

    .demo small {
        font-size: .7em;
    }
    .demo-gallery {
        cursor: pointer;
    }


    #customize {
        color: #555;
        background-color: rgba(220, 220, 220, .93);
    }

    #customize p {
        color: #888;
    }

    #footer {
        background-color: rgba(0, 0, 0, .89);
        color: #fff;
        margin: 0;
        padding: 2em 0;
    }

    /* --
       modalite
               -- */
    #nested {
        text-align: center;
    }
    #nested .dialog {}
    #nested .dialog .content {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        bottom 0;
        margin-top: -40px;
        padding: 0;
    }
    #sidebar .dialog {
        width: 300px;
        right: auto;
        background-color: rgba(26, 182, 255, .92);
        color: #fff;
        opacity: 1;
    }

    #sidebar .content {
        padding: 1em 0;
    }

    #sidebar ul {
        padding: 0;
        list-style: none;
    }

    #sidebar li a {
        display: block;
        padding: .6em 1.2em;
    }

    #sidebar li a:hover {
        background-color: rgba(0, 0, 0, .12)
    }

    #login>.dialog.error {
        -webkit-animation: shake.4s linear;
        animation: shake.4s linear;
    }

    #scroll {
        height: 300px;
    }
    #scroller * {
        text-align: center;
    }


    #modalCss.backdrop {
        background-color: rgba(217, 26, 64, .85);
    }

    #modalCss>.dialog {
        border-radius: .4em;
        text-align: center;
    }

    #modalCss .content p {
        margin: .8em 0;
    }

    #modalCss footer {
        padding: 0;
    }

    #modalCss footer button {
        width: 45%;
        float: left;
        margin: 0;
        border-radius: 0 0 0 .4em;
        background-color: #ff7878;
        color: #fff;
    }

    #modalCss footer button[data-modal-btn="action"] {
        width: 55%;
        background-color: #5675c7;
        border-radius: 0 0 .4em 0;
    }



    /* --
       icon
               -- */

    .icon.arrow {
        color: #000;
        position: relative;
        top: 1em;
        margin: 5px auto 0;
        width: 2px;
        height: 18px;
        background-color: currentColor;
        -webkit-animation: bounce2s infinite;
        animation: bounce2s infinite;
        opacity: .6;
    }

    .icon.arrow:before {
        content: '';
        position: absolute;
        left: -4px;
        top: 6px;
        width: 10px;
        height: 10px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
    }


    /* --
       animation
               -- */

@-webkit-keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
            -webkit-transform: translateY(0);
        }
        40% {
            -webkit-transform: translateY(-30px);
        }
        60% {
            -webkit-transform: translateY(-15px);
        }
    }

@keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
        40% {
            -ms-transform: translateY(-30px);
            transform: translateY(-30px);
        }
        60% {
            -ms-transform: translateY(-15px);
            transform: translateY(-15px);
        }
    }

@-webkit-keyframes shake {
        0% {
            -webkit-transform: translate(20px);
        }
        20% {
            -webkit-transform: translate(-20px);
        }
        40% {
            -webkit-transform: translate(10px);
        }
        60% {
            -webkit-transform: translate(-10px);
        }
        80% {
            -webkit-transform: translate(4px);
        }
        100% {
            -webkit-transform: translate(0px);
        }
    }

@keyframes shake {
        0% {
            -ms-transform: translate(20px);
            transform: translate(20px);
        }
        20% {
            -ms-transform: translate(-20px);
            transform: translate(-20px);
        }
        40% {
            -ms-transform: translate(10px);
            transform: translate(10px);
        }
        60% {
            -ms-transform: translate(-10px);
            transform: translate(-10px);
        }
        80% {
            -ms-transform: translate(4px);
            transform: translate(4px);
        }
        100% {
            -ms-transform: translate(0px);
            transform: translate(0px);
        }
    }
</style>
</body>
</html>