我正在使用magnific-popup来显示内联库(带有自定义HTML标记),就像示例here一样。这将打开自定义标记的库,您可以在其中单击3组化身/名称/位置数据。 (尝试下面的示例或代码,您将明白我的意思)。
但是,我找不到在锚定点击上打开第二个(或第一个以外的任何元素)的方法。
有没有人使用magnific-popup并且能够打开第一个元素以外的内联元素?
HTML:
<button style="padding:20px;">Open popup</button>
CSS:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
Javascript:
// Define data for the popup
var data = [
{
username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
userLocation: 'Pittsburgh, PA'
},
{
username: "Paul Irish",
userWebsite_href: 'http://paulirish.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
userLocation: 'San Francisco'
},
{
username: "Chris Coyier",
userWebsite_href: 'http://css-tricks.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
userLocation: 'Palo Alto, California'
}
];
// initalize popup
$('button').magnificPopup({
key: 'my-popup',
items: data,
type: 'inline',
inline: {
// Define markup. Class names should match key names.
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'<h2 class="mfp-username"></h2>'+
'</a>'+
'<div class="mfp-userLocation"></div>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
}
}
});
最佳答案
将此添加到您的magnificPopup函数中,这将在单击时打开第二项:
index:2,
在文档here中列出。
Example Codepen