function onSaveError() { $("#tip").removeClass("error"); $("#tip").addClass('notification'); $("#tip p").html("Sorry this bin is too large for us to save"); $("#tip").css({ display: "block" }); }; $("#tip").on("click", ".dismiss", function() { $("#tip").css({ display: "none" }); }); function onDelete(){ $("#tip p").html("this file is deleted"); $("#tip").removeClass("notification"); $("#tip").addClass('error'); $("#tip").css({ display: "block" }); }
<div id="tip"> <p> <label> <input type="checkbox" class="enablealt"> <strong>Turn this off</strong> You can access this any time in </label> </p> <a class="dismiss" href="#">Dismiss x</a> </div> <input type="submit" value="save" onclick="onSaveError();"/> <input type="submit" value="delete" onclick="onDelete();"/>
#tip.error { background: #FF4136; color: #fff; } .error a { color: #fff; text-shadow: none; } #tip { z-index: 100; display: none; border-top: 1px solid #ccc; position: absolute; bottom: 0; font-size: 14px; line-height: 22px; background: #fdfece; left: 0; right: 0; padding: 2px 10px 2px 10px; -webkit-animation: tip-flash 100ms linear 4 alternate; -moz-animation: tip-flash 100ms linear 4 alternate; -ms-animation: tip-flash 100ms linear 4 alternate; -o-animation: tip-flash 100ms linear 4 alternate; animation: tip-flash 100ms linear 4 alternate; -webkit-transition: bottom 100ms linear; transition: bottom 100ms linear; } #tip.notification, #tip.error { bottom: auto; top: 34px; line-height: 28px; box-shadow: 0 2px 4px rgba(0,0,0,.2); } #tip p { margin: 5px 25px 5px 0; padding: 0 65px 0 0; line-height: 1.3; } #tip a.dismiss { line-height: 28px; position: absolute; right: 20px; top: 2px; text-decoration: none; text-shadow: none; }