juegosfrivs

Alert by CSS3 & Javascript

Discussion created by juegosfrivs on Apr 26, 2014
CSS3:

<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>


http://www.yepi3games.org/alert.htm

Outcomes