Magnific Popup使用方法
2016-12-25 21:11
155 查看
1、引入外部文件 magnific-popup.css和 jquery.magnific-popup.js
<link rel="stylesheet" href="lib/magnific-popup.css">
<script src="lib/jquery.js"></script>
<script src="lib/jquery.magnific-popup.js"></script>
如果你已经导入了 jQuery.js,就不要再次包含它。当然你可以使用
jQuery.noConflict();
2、初始化poopup
Popup 的初始化代码应该在document(文档)ready之后执行,例如:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
有三种方法可以调用一个popup:
有两种方法可以定义content type:
1、使用type选项,例如:
2、使用 mfp-TYPE CSS 类,例如:
其中,第二种方法会覆盖第一种方法,因此你可以在一次调用定义多种类型的content type。
inline是默认的content type(从v0.8.4以来)。
有几种方法可以定义弹出窗口的源(例如,一张图片、一个HTML文档,一个视频页):
方法一:使用 href 属性:
<link rel="stylesheet" href="lib/magnific-popup.css">
<script src="lib/jquery.js"></script>
<script src="lib/jquery.magnific-popup.js"></script>
如果你已经导入了 jQuery.js,就不要再次包含它。当然你可以使用
jQuery.noConflict();
2、初始化poopup
Popup 的初始化代码应该在document(文档)ready之后执行,例如:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
有三种方法可以调用一个popup:
1、通过一个HTML元素
<a class="test-popup-link" href="path-to-image.jpg">Open popup</a> $('.test-popup-link').magnificPopup({ type: 'image' // other options });
2、通过一组有共同父元素的子元素
和之前的一样,不同的是创建一个弹出列表。注意,此方法不支持gallery(画廊)模式,它只不过减少了单击事件处理函数的数量——每个元素以独立的窗口弹出。如果你要使用gallery模式,添加gallery:{enabled:true}选项<div class="parent-container"> <a href="path-to-image-1.jpg">Open popup 1</a> <a href="path-to-image-2.jpg">Open popup 2</a> <a href="path-to-image-3.jpg">Open popup 3</a> </div> $('.parent-container').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image' // other options });
3、通过“items”选项
items选项为弹出项定义了一组数据,并且让Magnific Popup忽略目标DOM元素的所有属性值。items的值可以是单个对象或一个对象数组。// Example with single object $('#some-button').magnificPopup({ items: { src: 'path-to-image-1.jpg' }, type: 'image' // this is default type }); // Example with multiple objects $('#some-button').magnificPopup({ items: [ { src: 'path-to-image-1.jpg' }, { src: 'http://vimeo.com/123123', type: 'iframe' // this overrides default type }, { src: $('<div>Dynamically created element</div>'), // Dynamically created element type: 'inline' }, { src: '<div>HTML string</div>', type: 'inline' }, { src: '#my-popup', // CSS selector of an element on page that should be used as a popup type: 'inline' } ], gallery: { enabled: true }, type: 'image' // this is default type });
Content Types
Magnific Popup 一般支持4种类型:image、iframe、inline和ajax。由于并不存在基于URL的自动探测机制,因此你必须手工指定它。有两种方法可以定义content type:
1、使用type选项,例如:
$('.image-link').magnificPopup({type:'image'})
2、使用 mfp-TYPE CSS 类,例如:
<a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup()
其中,第二种方法会覆盖第一种方法,因此你可以在一次调用定义多种类型的content type。
inline是默认的content type(从v0.8.4以来)。
有几种方法可以定义弹出窗口的源(例如,一张图片、一个HTML文档,一个视频页):
方法一:使用 href 属性:
<a href="image-for-popup.jpg">Open image</a>方法二:使用data-mfp-src属性(覆盖方法一):
<a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a>方法三:使用 items 选项
<pre name="code" class="javascript">$.magnificPopup.open({ items: { src: 'some-image.jpg' }, type: 'image' });</pre><br><br>
相关文章推荐
- MSNPopUp使用方法
- AJAX扩展控件ModalPopupExtender(弹出模式对话框)的使用方法总结
- Ajax的 ModalPopupExtender控件使用方法
- AJAXToolkit_ ModalPopupExtender弹出窗中 使用分页方法
- ASPxPopupControl PopupWindow使用方法
- PopupWindow基本使用方法
- abap 弹出对话框函数POPUP_GET_VALUES的使用方法
- MSNPopUp使用方法
- 展示 Popup 的使用方法
- abap 弹出对话框函数POPUP_GET_VALUES的使用方法
- android popupwindow 的使用方法()
- 日期格式,Popup的使用方法,RenderTransform与LayoutTransform的区别
- jquery popupDialog 使用 加载jsp页面的方法
- Ajax的 ModalPopupExtender控件使用方法
- 解决ckfinder 在IE10下无法使用popup方法进行文件上传
- PopupWindow+spinner使用方法
- PopupWindow使用方法
- VSS实现版本控制管理的一些使用方法
- TListView组件使用方法