jQuery: Growl-like messages
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
- <style>
- .error_box {
- display: none;
- border: 1px solid #f7c7c9;
- background: #f9e5e6;
- position: fixed;
- width: 370px;
- right: 20px;
- top: 20px;
- -webkit-box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.3);
- box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.3);
- -webkit-border-radius: 5px;
- border-radius: 5px;
- text-align: center;
- }
- .error_message {
- color: #c77c7e;
- margin-top: 18px;
- font-weight: bold;
- text-shadow: 1px 1px 1px #FFFFFF;
- filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
- }
- </style>
- <div id="error_box" class="error_box">
- <p id="error_message" class="error_message"></p>
- </div>
- <script>
- function throw_message(str) {
- $('#error_message').html(str);
- $("#error_box").fadeIn(500).delay(3000).fadeOut(500);
- }
- </script>
- <a href='#' onclick='throw_message("It Was Clicked"); return false;'>Click it!</a>
Комментариев нет:
Отправить комментарий