使用 iosOverlay 弹出提示信息

<link rel="stylesheet" href="css/iosOverlay.css">

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

<script src="js/iosOverlay.js"></script>

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

		

    <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>

    <p class="container">
      <button id="loadToSuccess" class="btn">Loading Then Success</button>
    </p>

			

$(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("li");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    iosOverlay(...{
        text: "Loading",   //提示的信息可以自定义

			 duration: 2e3, //提示的时间长短  spinner: spinner  });  }); 

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

		

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

		

$(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("li");
    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;
});