我试图通过AJAX使用Magnific创建一个弹出页面但是得到一个' XMLHttpRequest无法加载'单击链接按钮时出错。
以下是投资组合部分的部分代码,其中点击按钮应加载project_1.html
:
<div class="masonry_items removeImgGrayFilter portfolio_items catFilterEffect_1 ajaxPopup_gallery" data-animated-time="15" data-animated-in="animated fadeIn" data-animated-innerContent="yes" data-anchor-to="parent.parent.parent">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Category 1 - jQuery -->
<!-- Thumbnail -->
<div class="item width_1by4 hover_enable cat1 selPopup">
<div class="item_thumbnail">
<div class="porImgOver">
<!-- Thumbnail Image -->
<img class="preload" src="images/0.png" data-src="images/portfolio/thumb1.jpg" alt="image_alt_text" />
</div>
<div class="imageText textOnHover">
<div class="text_field lightColorText">
<h5>Bloc Jams - jQuery</h5>
<h6>A fully functional digital music player similar to Spotify</h6>
<a class="detail_btn ajaxPopup_galItem" href="project_1.html">
<span class="icon"><i class="fa fa-search-plus"></i></span>
</a>
</div>
</div>
....
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/custom.min.js"></script>
&#13;
custom.min.js
// magnificPopup plugin Initialization
try {
//Initialize Image
$('.magnificPopup').each(function() {
var mc = $(this);
var tit = mc.attr("data-title") !== undefined ? "data-title" : "title";
var typ = mc.attr("data-type") !== undefined ? mc.attr("data-type") : "image";
mc.magnificPopup({
image: {
titleSrc: tit
},
type: typ,
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
closeBtnInside: true,
midClick: false // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
//Initialize Gallery
$('.magnificPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize portfolio item gallery
$('.magnificPopup_item_gallery').each(function() {
var mc = $(this);
var p_items = [];
mc.find(".i_gallery").children().each(function() {
var mc2 = $(this);
var tit = mc2.attr("data-title") !== undefined ? mc2.attr("data-title") : mc2.attr("title");
p_items.push({
src: mc2.attr("data-href"),
title: tit,
type: mc2.attr("data-type")
});
});
mc.magnificPopup({
items: p_items, // the selector for gallery item
type: 'image', // this is default type
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize inline content
$('.magnificPopup_inline').magnificPopup({
type: 'inline',
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
} catch (e) {}
try {
// Initialize popup detail text
$('.detail_text').each(function() {
var cont = $(this).find(".popup_text");
$(this).find(".link_btn").magnificPopup({
items: {
src: cont,
type: 'inline'
},
removalDelay: 500, //delay removal by X to allow out-animation
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
$('.ajaxPopup_link').magnificPopup({
type: 'ajax',
settings: null,
alignTop: false,
cursor: 'mfp-ajax-cur',
closeOnContentClick: false,
closeBtnInside: true
});
try {
//Initialize Gallery
$('.ajaxPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: '.selPopup a.ajaxPopup_galItem', // the selector for gallery item
type: 'ajax',
settings: null,
alignTop: true,
cursor: 'mfp-ajax-cur',
gallery: {
enabled: true
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
&#13;