jQuery+css3简单实用确认对话框

 <div class="cd-popup-container">

    <p>Are you sure you want to delete this element?</p>

    <ul class="cd-buttons">

      <li><a href="#0">Yes</a></li>

      <li><a href="#0">No</a></li>

    </ul>

    <a href="#0" class="cd-popup-close img-replace">Close</a>

  </div> <!-- cd-popup-container -->

</div> <!-- cd-popup -->

translateY(-40px)），并在最终将其位置转换为translateY(0)。

.cd-popup {

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s 0s, visibility 0s 0.3s;

}

.cd-popup.is-visible {

  opacity: 1;

  visibility: visible;

  transition: opacity 0.3s 0s, visibility 0s 0s;

}

.cd-popup-container {

  transform: translateY(-40px);

  transition-property: transform;

  transition-duration: 0.3s;

}

.is-visible .cd-popup-container {

  transform: translateY(0);

}

jQuery(document).ready(function($){

  //open popup

  $('.cd-popup-trigger').on('click', function(event){

    event.preventDefault();

    $('.cd-popup').addClass('is-visible');

  });

  //close popup

  $('.cd-popup').on('click', function(event){

    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {

      event.preventDefault();

      $(this).removeClass('is-visible');

    }

  });

  //close popup when clicking the esc keyboard button

  $(document).keyup(function(event){

      if(event.which=='27'){

        $('.cd-popup').removeClass('is-visible');

      }

    });

});