Alert by CSS3 & Javascript
CSS:
<style> .msgBox{ position:absolute; z-index:10; border-radius:5px; border:1px solid #F5F5F5; background-color:#DDD; box-shadow:1px 1px 5px #999; overflow:hidden; display:none} .msgBox ul, .msgBox li{ list-style:none; padding:0; margin:0; border:0} .msgBox .title{ border-bottom:#AAA solid 1px; padding:5px; background-color:#CCC; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-shadow:1px 1px #DDD; font-size:12px} .msgBox .msgContent{ border-top:#F5F5F5 solid 1px; padding:5px; text-shadow:1px 1px #F1F1F1; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size:12px} .msgBox .ok{ text-shadow:1px 1px #F1F1F1; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size:12px; margin:0 auto 5px auto; width:20px; padding:4px 5px 4px 5px; background-color:#CCC; text-align:center; cursor:pointer; transition:all 300ms linear; border:#DDD solid 1px; box-shadow:0 0 1px #AAA; border-radius:4px} .msgBox .ok:hover{ background-color:#EEE} </style> HTML: <div class="msgBox"> <ul class="title">Alert</ul> <ul class="msgContent">No messege</ul> <ul> <li class="ok">Ok</li> </ul> </div> JS: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script language="javascript"> // Upgraded confirm function var msgBox = function(msg){ var w =$(document).width(), h = $(document).height(); var msgW = $('.msgBox').width(), msgH = $('.msgBox').height(); $('.msgBox').css({left:(w-msgW)/2, top:(h-msgH)/2}); $('.msgBox') .show() .find('.msgContent').text(msg); $('.msgBox').find('.ok').click(function(){ $('.msgBox').hide(); }); $(document).keyup(function(event){ if(event.which==13){ $('.msgBox').hide(); } }); } msgBox('Enter your message!'); </script> Demo: http://www.yepi3games.org/alert.htm |
juegosfrivs,
а зачем jQuery? выравнивание можно делать и без него... <style type="text/css"> html, body { padding: 0; margin: 0; } /* для выравнивания блока по вертикали */ .msg-box-wrapper { display: none; position: fixed; width: 100%; height: 100%; } /* заднее затемнение */ .msg-box-wrapper .shadow { position: absolute; background-color: #000000; opacity: 0.03; width: 100%; height: 100%; } /* для выравнивания блока по горизонтали */ .msg-box-wrapper .msg-box-cell { display: table-cell; position: relative; text-align: center; vertical-align: middle; } /* Окно с сообщением */ .msg-box { display: inline-block; border-radius: 5px; border: 1px solid #f5f5f5; background-color: #ddd; box-shadow: 1px 1px 5px #999; overflow: hidden; text-align: left; } /* Заголовок окна */ .msg-box .title { background: #ccc; border-bottom: 1px solid #aaa; padding: 5px; font: bold 12px Arial; } /* Сообщение */ .msg-box .msg-content { font: normal 12px Times; padding: 5px; } /* Обертка кнопки */ .msg-box .button { text-align: center; padding: 0 0 5px 0; } /* Кнопка */ .msg-box .button button { text-shadow: 1px 1px #f1f1f1; font: normal 12px Times; background-color: #ccc; transition: all 300ms linear; border: #ddd solid 1px; box-shadow: 0 0 1px #aaa; border-radius: 4px; outline: none; } /* Кнопка при наведении мыши */ .msg-box .button button:hover { background-color: #eee; } </style> <div class="msg-box-wrapper"> <div class="shadow"></div> <div class="msg-box-cell"> <div class="msg-box"> <div class="title">Alert</div> <div class="msg-content">Enter your message!</div> <div class="button"><button>Ok</button></div> </div> </div> </div> <a href="" onclick="document.querySelector('.msg-box-wrapper').style.display = 'table'; return false;">Открыть Алерт</a> <script type="text/javascript"> document.querySelector('.button button').onclick = function() { document.querySelector('.msg-box-wrapper').style.display = 'none'; }; </script> |
Часовой пояс GMT +3, время: 08:52. |