jQuery响应式模态窗口和弹出对话框插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery响应式模态窗口和弹出对话框插件
jQuery响应式模态窗口和弹出对话框插件
分享:

    插件介绍

    jquery-popup是一款非常实用的jQuery响应式模态窗口和弹出对话框插件。这个插件提供两个方法popup()和dialog()分别来显示模态窗口和弹出对话框,并且内置了7种CSS3过渡动画特效。

    浏览器兼容性

    浏览器兼容性
    时间:2015-06-15
    阅读:
简要教程

jquery-popup是一款非常实用的jQuery响应式模态窗口弹出对话框插件。这个插件提供两个方法popup()dialog()分别来显示模态窗口和弹出对话框,并且内置了7种CSS3过渡动画特效。它的特点有:

  • 使用简单,样式可以自定义。
  • 可以使用Ajax来加载数据。
  • 支持多种媒体类型,如文字,图片,youtube视频和iframe等。
  • 内置7种强大的CSS3动画效果。

使用方法

首先要引入jQuery和jquery.popup.css、jquery.popup.js和jquery.popup.dialog.js文件。

<link href="jquery.popup.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.popup.js"></script>
<script src="jquery.popup.dialog.js"></script>                
              
$.popup使用方法

你可以使用$.popup方法来在模态窗口中调用一段Youtube视频,这需要创建一个带data-action属性的<a>标签。

<a href="https://www.youtube.com/embed/e9al_k8e93I" data-action="watch-video">
  <img src="video.jpg" />
</a>

<!-- 模态窗口代码 -->
<div class="popup effect-fade-scale" id="popup-video">
  <div class="embed-container"></div>
  <a href="#" class="popup-close">
    <i class="glyphicon glyphicon-remove"></i>
  </a>
</div>         
              

然后添加一些必要的CSS样式。

#popup-video.popup {
  overflow: visible;
  background-color: #1B1B1B;
  box-shadow: 0px 1px 5px 0 rgba( 0, 0, 0, .8 );
}

#popup-video.popup .popup-close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -30px;
  font-size: 1.5em;
  color: #fff;
}

#popup-video.popup .embed-container { 
  position: relative; 
  z-index: 1;
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 

#popup-video.popup .embed-container iframe, 
#popup-video.popup .embed-container object, 
#popup-video.popup .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
              
              

最后在页面DOM元素加载完毕之后使用下面的方法来初始化模态窗口。

$(document).ready(function(){
  $('.popup').popup({
    close: function(){
      $(this).find('.embed-container').empty();
    }
  });

  $(document).on('click', '[data-action="watch-video"]', function(e){

    e.preventDefault();

    var plugin = $('#popup-video.popup').data('popup');

    $('#popup-video.popup .embed-container').html(
      '<iframe src="'
      + e.currentTarget.href
      + '?autoplay=1" frameborder="0" allowfullscreen />'
    );

    plugin.open();
  });

});
                
              
$.popup使用方法

如果你要创建弹出对话框,可以使用$.popup方法。创建一个按钮,用于激活对话框。

<button class="btn" data-dialog="#popup-dialog">Click Me</button>

<!-- Dialog的内容 -->
<div class="popup effect-fade-scale" id="popup-dialog">
  <div class="popup-content">
    <h3>Dialog Box Heading</h3>
    <p>
    这里放置对话框的内容
    </p>
    <button class="popup-close">Close</button>
  </div>
</div>        
              

可以为对话添加一些CSS样式。

.popup {
  background-color: rgb( 248, 248, 248 );
  box-shadow: 0px 2px 2px 0px rgba( 0, 0, 0, .3 );
}

.popup-content {
  padding: 20px 40px 30px 40px;
}

.popup-overlay {
  background-color: rgba( 0, 0, 0, .3 );
}
                
              

参数

  • modal:默认值false,是否是模态窗口模式。
  • bubble:默认值true,是否是浮动模式。
  • open: function() {}:模态窗口会对话框打开后的回调函数。
  • close: function() {}:模态窗口会对话框关闭后的回调函数。
  • realign: function() {}:模态窗口会对话框重新布局后的回调函数。

更多详细信息请参考:https://github.com/Konstantin-Kachurenko/jquery-popup