2 Replies Latest reply on Apr 26, 2014 11:55 AM by VU VAN BAC

    Alert by CSS3 & Javascript

    VU VAN BAC

      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>

       

       

        Alert
           
        No messege
           
            
      • Ok
      •    

      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