jquery popup and alerts

Sometimes you need to go back to basics and use the .alert() function is jQuery to see what the hell a variable is or check if your JavaScript is actually working at all?! ... Also known as a jQuery command box or system popup window that contains text information displayed to the user.

jqueryCode :

<!doctype html>
<html lang="en">
 <head>
 <script src='http://code.jquery.com/jquery-latest.min.js'></script>
  <style>
    #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;
 }

  </style>
 </head>
 <body>
  <div id="tip">
  <p>
   <label>
    <input type="checkbox" class="enablealt"> 
     <strong>Turn this off</strong>
     . Reserve ctrl+[n] for switching browser tabs and use ctrl+<u>alt</u>+[n] to switch JS Bin panels. You can access this any time in 
     <strong>Help→Keyboard</strong>
   </label>
  </p>
  <a class="dismiss" href="#">Dismiss x</a>
</div>
<input type="submit" value="save" onclick="onSaveError();"/>
<input type="submit" value="delete" onclick="onDelete();"/>
<script>
  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" });
  }
</script>
 </body>
</html>

javatospring

jquery popup and alerts

Vikasdhar Inkollu