Snippio

Jquery Elegent Toast and Confirm Modal Box

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>jQuery Web Toast Plugin Examples</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.0/materia/bootstrap.min.css"> <link rel="stylesheet" href="dist/webToast.min.css" /> <style> body { background-color: #fafafa; } .container { margin: 100px auto; } </style> </head> <body> <div class="container"> <h1>jQuery Web Toast Plugin Examples</h1> <div id="carbon-block" style="margin:30px auto"></div> <div style="margin:30px auto"></div> <p class="lead">A tiny yet versatile popup box plugin to create animated alert & confirm dialogs and loading boxes inspired by Android's Toast Messages.</p> <button class="btn btn-danger" onclick="webToast.Danger({ status:'Toast Title', message:'Danger Alert Message' })">Danger</button> <button class="btn btn-success" onclick="webToast.Success({ status:'Toast Title', message:'Success Alert Message', align:'bottomleft' })">Success</button> <button class="btn btn-info" onclick="webToast.Info({ status:'Toast Title', message:'Info Alert Message' })">Success</button> <button class="btn btn-primary" id="confirm">Confirm</button> <button class="btn btn-warning" id="loading">Loading</button> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="dist/webToast.min.js"></script> <script> $("#confirm").click(function(){ var confirmBox= webToast.confirm("Are you sure?" ); confirmBox.click(function(){ alert('confirmed Data'); }) }) $("#loading").click(function(){ webToast.loading({ status:'Loading...', message:'Please Wait a moment', align:'bottomright', line:true }); }) </script> <script> "use strict"; const webToast = function (t) { let o, a = !1, s = ""; let n = function () { t("body").prepend("<style>*{box-sizing:border-box}@keyframes slideRight{0%{transform:translateX(100px)}70%{transform:translateX(-30px)}100%{transform:translateX(0)}}@keyframes slideLeft{0%{transform:translateX(-100px)}70%{transform:translateX(30px)}100%{transform:translateX(0)}}@keyframes slideDown{0%{transform:translateY(-100px)}70%{transform:translateY(30px)}100%{transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100px)}70%{transform:translateY(-30px)}100%{transform:translateY(0)}}.toasttopright{left:initial;right:20px;animation:slideRight .8s}.toasttopleft{left:20px;animation:slideLeft .8s}.toasttopcenter{left:0;right:0;text-align:center;animation:slideDown .8s}.toastbottomcenter{left:0;right:0;bottom:20px;top:initial!important;text-align:center;animation:slideUp .8s}.toastbottomleft{bottom:20px;top:initial!important;animation:slideLeft .8s}.toastbottomright{right:20px;bottom:20px;top:initial!important;animation:slideRight .8s}.toastContainer{position:fixed;top:20px;z-index:999999}.webToast{display:inline-block;text-align:left;padding:10px 0;background-color:#fff;border-radius:4px;max-width:500px;top:0;position:relative;box-shadow:0 0 10px 0 rgba(0,0,0,.2);transition:all .8s ease-in;z-index:99999}.webToast:before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-top-left-radius:4px;border-bottom-left-radius:4px}.toastIcon{position:absolute;top:50%;left:15px;transform:translateY(-50%);width:30px;height:30px;padding:5px;border-radius:50%;display:inline-block;font-size:20px;font-weight:700;text-align:center;color:#fff;padding-top:1px}.toastStatus{color:#3e3e3e;font-weight:700;margin-top:0;margin-bottom:2px;font-size:20px}.toastMessage{font-size:16px;margin-top:0;margin-bottom:0;color:#878787}.toastContent{padding-left:60px;padding-right:40px}.toast__close{position:absolute;right:15px;top:38%;width:14px;cursor:pointer;height:14px;color:#ada9a9;transform:translateY(-50%);font-size:28px}.toastSuccess .toastIcon{background-color:#2bde3f}.toastSuccess:before{background-color:#2bde3f}.toastInfo .toastIcon{background-color:#1d72f3}.toastInfo:before{background-color:#1d72f3}.toastDanger .toastIcon{background-color:#ef6658}.toastDanger:before{background-color:#ef6658}.ConfirmConainer{top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}.ConfirmConainer .toastConfirm{padding:20px;min-width:400px;max-width:100%}.ConfirmConainer .confirm-description{padding:10px 0;margin-bottom:5px}.toastConfirm>.toastContent{padding:0 10px;min-width:300px}.toastConfirm>.toastContent>p{font-size:20px;border-bottom:1px solid #ddd;margin-bottom:6px;padding-bottom:5px;color:#1654b3;font-weight:700}.toastConfirm>.toastContent button{padding:5px;font-size:15px;border-radius:4px;cursor:pointer;outline:0 solid;color:#fff}.toastConfirm>.toastContent button[data-confirm]{border:1px solid #0a5ede;background:#0a5ede}.toastConfirm>.toastContent button[data-confirm]:focus{border:2px solid #eae541}.toastConfirm>.toastContent button[data-cancel]{border:1px solid #ef6658;background:#ef6658;float:right}.confirmBG{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4)}.webToast-loader{border-radius:50%;border-top:3px solid #3498db;width:30px;height:30px;-webkit-animation:webToastSpin 1s linear infinite;animation:webToastSpin 1s linear infinite;margin-left:-6px}@-webkit-keyframes webToastSpin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes webToastSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.webToast-line-loader{position:fixed;top:0;left:0;right:0;z-index:99999;height:5px;background-color:#1d72f3;background-image:linear-gradient(-45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%,transparent);background-size:30px 30px;animation:move 1s linear infinite}@keyframes move{0%{background-position:0 0}100%{background-position:30px 30px}}</style>"), t("body").append('<div id="webtoast"></div>'), a = !0 }, i = function (o) { t(o).fadeOut(1e3, function () { o.remove() }) }, e = function (t, o) { setTimeout(function () { i(t) }, o || 3e3) }; const r = function (t, o, a) { t.click(function () { i(a) }), o.click(function () { i(a) }) }; return { Success: function (i) { ! function (i) { s = i.align ? i.align.toLowerCase() : "topright", o = t('<div class="toastContainer toast' + s + '" onclick="webToast.ToastRemove(this)"><div class="webToast toastSuccess"><div class="toastIcon"> ✓ </div><div class="toastContent"><p class="toastStatus">' + i.status + '</p><p class="toastMessage">' + i.message + '</p></div><div class="toast__close"> ⨯ </div></div></div>'), a || n(), t("#webtoast").append(o), e(o, i.delay) }(i) }, Danger: function (i) { ! function (i) { s = i.align ? i.align.toLowerCase() : "topright", o = t('<div class="toastContainer toast' + s + '" onclick="webToast.ToastRemove(this)"><div class="webToast toastDanger"><div class="toastIcon"> ⓘ </div><div class="toastContent"><p class="toastStatus">' + i.status + '</p><p class="toastMessage">' + i.message + '</p></div><div class="toast__close"> ⨯ </div></div></div>'), a || n(), t("#webtoast").append(o), e(o, i.delay) }(i) }, Info: function (i) { ! function (i) { s = i.align ? i.align.toLowerCase() : "topright", o = t('<div class="toastContainer toast' + s + '" onclick="webToast.ToastRemove(this)"><div class="webToast toastInfo"><div class="toastIcon"> ⓘ </div><div class="toastContent"><p class="toastStatus">' + i.status + '</p><p class="toastMessage">' + i.message + '</p></div><div class="toast__close"> ⨯ </div></div></div>'), a || n(), t("#webtoast").append(o), e(o, i.delay) }(i) }, ToastRemove: function (t) { i(t) }, loading: function (i) { return function (i) { let e = ""; return 1 == i.line && (e = '<div class="webToast-line-loader"></div>'), s = i.align ? i.align.toLowerCase() : "topright", o = t("<div> " + e + '<div class="toastContainer toast' + s + '" ><div class="webToast"><div class="toastIcon" style="background:transparent"><div class="webToast-loader"></div> </div><div class="toastContent"><p class="toastStatus">' + i.status + '</p><p class="toastMessage">' + i.message + "</p></div></div></div></div>"), a || n(), t("#webtoast").append(o), o }(i) }, confirm: function (i) { return function (i) { s = i.align ? i.align.toLowerCase() : "topright", o = t('<div class=""><div class="confirmBG"></div><div class="toastContainer toast' + s + ' ConfirmConainer"><div class="webToast toastConfirm"><div class="toastContent"> <p class="toastMessage">' + (i.message ? i.message : i) + "</p><button data-confirm > Confirm </button><button data-cancel > Cancel </button></div> </div></div></div>"), a || n(), t("#webtoast").append(o); let e = o.find("button[data-confirm]"), d = o.find("button[data-cancel]"); return r(e, d, o), e }(i) } } }(jQuery); </script> </body> </html>

Preview