当前位置:主页 > 网页特效 > HTML5+CSS3 >

jQuery和css3简单实用的模态确认对话框插件

发布时间:2019/05/11?来源:互联网?浏览:?关键词:对话框?jquery?CSS3?
jQuery和css3简单实用的模态确认对话框插件 jQuery和css3简单实用的模态确认对话框插件
阿里云

简要教程

这是一款 简单实用的 jQuery和css3模态确认对话框插件。每一个网站都会使用到确认对话框,这个插件可以为你的网站的确认对话框带来一点有趣的动画效果。

HTML结构

html结构非常简单,div?.cd-popup作为wrapper包含整个弹出的内容(包括半透明的遮罩层)。div?.cd-popup-container作为内容包裹器,在它里面包含一个无序列表,该无序列表的列表项被用来做“YES”和“NO”选项按钮。还包含一个用于关闭对话框的关闭按钮。


  
    

Are you sure you want to delete this element?

  • Yes
  • No
  • Close

    CSS样式

    这里我们唯一关心的事情是对话框被显示时的动画效果。这个动画效果通过CSS3 transition结合visibility属性和opacity属性来完成。对于内容包裹器?.cd-popup-container,它的默认位置在开始的时候做了一些改动(transform: translateY(-40px)),并在最终将其位置转换为translateY(0)。

    .cd-popup {
      opacity:0;
      visibility:hidden;
      transition: opacity0.3s0s, visibility0s0.3s;
    }
    .cd-popup.is-visible{
      opacity:1;
      visibility:visible;
      transition: opacity0.3s0s, visibility0s0s;
    }
    .cd-popup-container {
      transform:translateY(-40px);
      transition-property: transform;
      transition-duration:0.3s;
    }
    .is-visible.cd-popup-container {
      transform:translateY(0);
    }

    JAVASCRIPT

    插件中仅是使用jQuery来在显示和隐藏兑换窗口时添加/移除class。

    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');
          }
        });
    });

    共有人阅读,期待你的评论!评论
    说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!
    Top