jQuery响应式弹出层和对话框插插件MagnificPopup

所属分类:UI,媒体-对话框,弹出层,图片展示

 16738  79  查看评论 (6)
jQuery响应式弹出层和对话框插插件MagnificPopup ie兼容8

Magnific Popup使用方法

需要包含的文件

<!-- Magnific Popup core CSS file -->  
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">   
  
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->  
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    
  
<!-- Magnific Popup core JS file -->  
<script src="magnific-popup/jquery.magnific-popup.js"></script>

虽然不是必需的,但我们建议把CSS文件放在 <head> 内,JS文件和初始化代码放在 </body>之前。

如果你已经导入了 jQuery.js,就不要再次包含它。当然你可以使用

jQuery.noConflict();

另外,你可以选择包含Zepto.js代替jQuery。或者根据浏览器来选择加载哪一个。

初始化popup(弹出窗口)

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


相关插件-对话框,弹出层,图片展示

移动端弹出框插件

一款专为移动端开发的弹窗插件,在项目中发现很多地方需要调用弹窗,并且样式大同小异。所以试着写了一个公共的。供大家参考。
  对话框
 2818  27

jQuery和CSS3时尚手机聊天框界面动画特效

这是一款效果非常时尚大方的jQuery和CSS3手机聊天框界面动画特效。该聊天框界面适合用于各类手机APP的聊天界面布局。
  对话框
 9661  82

JQuery话框插件-LeanModal

LeanModal是一个用于创建模式对话框的超级简单JQuery插件。可以展示隐藏的页面内容,整个插件大小只有780bytes,可灵活变化高度和宽度,没有用到任何图片,支持在一个页面中创建多个实例,非常适合于创建:登录框,注册框,警告对话框等。
  对话框
 26657  24

对话框jQuery插件Zebra_Dialog

Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持。可用于替换JavaScript原始的“alert” 和“confirmation”对话框。
  对话框
 17384  8

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    雨_爱 0
    2017/9/6 14:45:05

    能不能自定义一个html?怎么做?

    回复
    Touch-sky 0
    2017/4/25 9:55:58
    花檫半夏、夜已殇 0
    2017/4/1 19:09:12
    楼主请问,使用了框架弹出问题怎么解决 回复
    转过身、彼此不认识、 0
    2017/2/23 17:06:24
    好东西,分享一个,感谢楼主! 回复
    五十米深蓝 0
    2017/1/16 16:41:13
    ★身不由己√ 0
    2016/10/8 13:10:01
    楼主,求把源码,谢谢!472763693@qq.com 回复
取消回复