jQuery? ??? ?? ???

? ???? ???? ? ?? ??? ???? ???? ???? ?? ??? ??? ? ????. ?? ??? ?? ? ??? ?? ?? ?????. ? ???? ???? ??? ??? ??? ??? ???? ? ??? ?? jQuery? ???? ??? ??? ??? ??? ?????.

1??: CSS ????

??, CSS ???? ???? ?? ??? ??? ?????.

a.selected {
  background-color: #1F75CC;
  color: white;
  z-index: 100;
}

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 394px;
  z-index: 50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

? CSS? ?? ??, ? ?? ??? ?? ???? ?????. ?? ?? ??, ??? ? ?? ??? ??????.

2??: JavaScript ??

???? ?? ??? ???? JavaScript ??? ????.

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

• deselect(): ? ??? ??? ?? ??? ???? ??? ??? ?????. element.
• $('#contact').on('click', ...): ? ??? ???? ID? 'contact'? ??? ??? ? ?? ?? ??? ?????.
• $('.close').on('click', ...): ? ??? ???? 'close' ??? ??? ?? ? ??? ????. ??????.
• $.fn.slideFadeToggle: ? ??? ?? ??? ??? ???? ???? ????? ?????.

3??: HTML ??

????? ?? ? ??? HTML ??? ?????. ??:

<div class="messagepop pop">
  <form method="post">

? HTML? ??? ?? ? ??? ??? ??? ??? ??? ID? '???'? ??? ??? ??? ?? ???? ?????.

??? ??? ???? '????' ??? ??? ? ???? ???? ??? ??? ??? ??? ??? ??? ??? ?? ? ????. ? ??? ?? ?? ??? ?? ?? ??? ???? ??? ? ????.

? ??? ???? ??? ??? ??? ??? ???? ??? jQuery ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!