Create a modal window in jQuery and CSS3

Using the classic "alert" or "confirm" are not deprecated but are not just attractive anymore. Web 2.0 brought us a new way to make websites and messages more attractive to the user.

In response to this, here's a quick way to make all your modal windows as pretty as possible using jQuery and CSS3.

HTML Code

<span class="modal info" title="Some information">info</span>
<br />
<span class="modal confirm" title="Are you sure you want to delete this record?">confirm</span>

<div id="modalWrapper"></div>
<div id="modalBox">
<div class="modalContent">
  <div id="modalMessage"></div>
  <div id="modalAction">
    <span class="button" id="buttonSubmit">Yes</span>
    <span class="button" id="buttonCancel">No</span>
    <span class="button" id="buttonClose">Close</span>
  </div>
</div>
</div>

CSS Code

#modalWrapper {
  width:100%;
  height:100%;
  background:#B2AF9E;
  position:absolute;
  top:0;
  left:0;
  z-index:3000;
  display:none;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}
#modalBox {
  width:500px;
  background:#E7E3DA;
  position:absolute;
  z-index:5000;
  display:none;
  -webkit-box-shadow: 4px 4px 10px #422A20;
  -moz-box-shadow: 4px 4px 10px #422A20;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#modalBox .modalContent {
  text-align:left;
  padding:10px;
  margin:10px;
  color:#333;
  font: normal 12px Tahoma;
}
#modalBox #modalAction {
  text-align:center;
}
#modalBox #modalMessage {
  display: block;
  margin: 5px 0 25px 0;
  clear: both;
}
span.button {
  width:60px;
  background-color: #422A20;
  color: #fff;
  margin: 0 10px;
  padding: 5px 15px;
  text-align:center;
  text-decoration: none;
  font: bold 12px Tahoma;
  cursor: pointer;
  -moz-border-radius: 6px;
  -webkit-border-radius:6px;
  text-shadow: 0 1px 1px #000;
  -moz-box-shadow: 0 1px 3px #000;
  -webkit-box-shadow: 0 1px 3px #000);
}
span.button:hover {
  background: #EC7517;
}
span#buttonCancel {
  background: #BE9E84;
}
span#buttonCancel:hover {
  background: #aaa;
}

JavaScript Code

$(document).ready(function () {
  $('#buttonClose, #modalWrapper, #buttonCancel').click(function () {
    $('#modalWrapper, #modalBox').fadeOut('fast');
    return false;
  });
  $('#buttonSubmit').click(function() {
    alert('You clicked "Yes"');
    $('#modalWrapper, #modalBox').fadeOut('fast');
    return false;
  });
  $('.modal').click(function() {
    popup($(this));
  });
});

function popup(element) {
  var type = 'info';
  var message = element.attr('title');
  if(element.hasClass('confirm')) {
    $('#buttonSubmit').show();
    $('#buttonCancel').show();
    $('#buttonClose').hide();
  }
  else {
    $('#buttonSubmit').hide();
    $('#buttonCancel').hide();
    $('#buttonClose').show();
  }
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  var modalTop =  (maskHeight/3) - ($('#modalBox').height());
  var modalLeft = (maskWidth/2) - ($('#modalBox').width()/2);
  $('#modalWrapper').css({ 'height':maskHeight + 'px', 'width':maskWidth + 'px' }).fadeIn(200, function() {
    $('#modalMessage').html(message);
    $('#modalBox').css({ 'top':modalTop + 'px', 'left':modalLeft + 'px' }).fadeIn(100);
  });
}

Now you have an elegant way to show messages or confirmation dialog to the user.