iosOverlay.js苹果手机操作提示

本文演示了IOS常用的四种不同的提示效果，兼容所有浏览器。

淘建站为您提供更多_悬浮层/弹出层_弹窗_提示_ios，在此特别感谢您对我们的支持与厚爱！

HTML

<p class="container">
      <button id="loading" class="btn">Loading Spinner</button>
      <button id="checkMark" class="btn">Success</button>
      <button id="cross" class="btn">Error</button>
</p>

引入相关组件

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/iosOverlay.css">
<script src="js/jquery.min.js"></script>
<script src="js/iosOverlay.js"></script>
<script src="js/custom.js"></script>

Loading Spinner

$(document).on("click", "#loading",
function(e) {
    var opts = {
        lines: 13,
        // The number of lines to draw
        length: 11,
        // The length of each line
        width: 5,
        // The line thickness
        radius: 17,
        // The radius of the inner circle
        corners: 1,
        // Corner roundness (0..1)
        rotate: 0,
        // The rotation offset
        color: '#FFF',
        // #rgb or #rrggbb
        speed: 1,
        // Rounds per second
        trail: 60,
        // Afterglow percentage
        shadow: false,
        // Whether to render a shadow
        hwaccel: false,
        // Whether to use hardware acceleration
        className: 'spinner',
        // The CSS class to assign to the spinner
        zIndex: 2e9,
        // The z-index (defaults to 2000000000)
        top: 'auto',
        // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var target = document.createElement("div");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    iosOverlay({
        text: "Loading",
        duration: 2e3,
        spinner: spinner
    });
    return false;
});

Success

$(document).on("click", "#checkMark",
function(e) {
    iosOverlay({
        text: "Success!",
        duration: 2e3,
        icon: "img/check.png"
    });
    return false;
});

Error

$(document).on("click", "#cross",
function(e) {
    iosOverlay({
        text: "Error!",
        duration: 2e3,
        icon: "img/cross.png"
    });
    return false;
});

loadToSuccess

$(document).on("click", "#loadToSuccess",
function(e) {
    var opts = {
        lines: 13,
        // The number of lines to draw
        length: 11,
        // The length of each line
        width: 5,
        // The line thickness
        radius: 17,
        // The radius of the inner circle
        corners: 1,
        // Corner roundness (0..1)
        rotate: 0,
        // The rotation offset
        color: '#FFF',
        // #rgb or #rrggbb
        speed: 1,
        // Rounds per second
        trail: 60,
        // Afterglow percentage
        shadow: false,
        // Whether to render a shadow
        hwaccel: false,
        // Whether to use hardware acceleration
        className: 'spinner',
        // The CSS class to assign to the spinner
        zIndex: 2e9,
        // The z-index (defaults to 2000000000)
        top: 'auto',
        // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var target = document.createElement("div");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    var overlay = iosOverlay({
        text: "Loading",
        spinner: spinner
    });

    window.setTimeout(function() {
        overlay.update({
            icon: "img/check.png",
            text: "Success"
        });
    },
    3e3);

    window.setTimeout(function() {
        overlay.hide();
    },
    5e3);

    return false;
});

详细方法请下载压缩包，查看custom.js

iosOverlay.js相关API