<div class="notice-warning"> <div class="notice-close">×</div> <strong>Внимание!</strong> Я сейчас потеряю терпение. </div>
body { color: #333; font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } strong { font-weight: 600; } .notice-warning { background: linear-gradient(#ffdc72, #ffbf00); border: 1px solid #f2b600; border-bottom-color: #c90; border-radius: 6px; padding: 10px 16px; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .notice-close { background: #ffdc72; background: rgba(255, 255, 255, .5); border-radius: 50%; box-shadow: inset 0 1px 2px rgba(178, 133, 0, .9), inset 0 -1px 2px rgba(255, 255, 255, .25); color: #b28500; cursor: pointer; font-size: 18px; font-weight: 600; height: 24px; float: right; text-align: center; transition: color .15s ease; width: 24px; } .notice-close:hover { color: #8c6900; }
$('.notice-close').on('click', function(event){ $('.notice-warning').fadeOut('slow', function(event){ $(this).remove(); }); });