jQuery响应式模态窗口和弹出对话框插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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