ボタンからポップアップウィンドウを実装しようとしている小さなプロジェクトに取り組んでいます。この開発者サイトbPopupで見つけたコードを使用しています。JSFiddleでコードを試してみましたが、機能しますが、コードを自分のサイトにアップロードすると機能しません。jqueryファイルとbpopupjavascriptファイルを参照する方法を試してみましたが、まだ何もありません。DOM Readyの問題も調べましたが、問題はないと思いますが、間違っている可能性があります。
これらの3つのファイルを使用してサイトを実行すると、出力はボタンになります。クリックしても何も起こらず、iframe内のビデオがその下に表示されます（ボタンをクリックする前）。助けてくれてありがとう！
Html（ファイル名blog.html、それは私のindex.htmlからリンクされています）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
<script src="bPopup.js"></script>
<script src="jquery-1.8.2.min.js"></script>
<meta name ="viewport" content = "width=640, user-scalable=yes">
<title>OneLine</title>
</head>
<body>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="bClose"></a>
<iframe width="280" height="157.5" src="http://www.youtube.com/embed/iw8wDinJxBQ" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
CSS（ファイル名animate.css）：
/* PopUp Window */
#element_to_pop_up {
background-color:#000000;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:300px;
min-height: 400px;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
Javascript（ファイル名bPopup.js）：
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
/*********************************************************************************
* @name: bPopup
* @author: (c)Bjoern Klinggaard (http://dinbror.dk/bpopup - twitter@bklinggaard)
* @version: 0.7.0.min
*********************************************************************************/
(function(b) {
b.fn.bPopup = function(n, p) {
function t() {
b.isFunction(a.onOpen) && a.onOpen.call(c);
k = (e.data("bPopup") || 0) + 1;
d = "__bPopup" + k;
l = "auto" !== a.position[1];
m = "auto" !== a.position[0];
i = "fixed" === a.positionStyle;
j = r(c, a.amsl);
f = l ? a.position[1] : j[1];
g = m ? a.position[0] : j[0];
q = s();
a.modal && b('<div class="bModal ' + d + '"></div>').css({
"background-color": a.modalColor,
height: "100%",
left: 0,
opacity: 0,
position: "fixed",
top: 0,
width: "100%",
"z-index": a.zIndex + k
}).each(function() {
a.appending && b(this).appendTo(a.appendTo)
}).animate({
opacity: a.opacity
}, a.fadeSpeed);
c.data("bPopup", a).data("id", d).css({
left: !a.follow[0] && m || i ? g : h.scrollLeft() + g,
position: a.positionStyle || "absolute",
top: !a.follow[1] && l || i ? f : h.scrollTop() + f,
"z-index": a.zIndex + k + 1
}).each(function() {
a.appending && b(this).appendTo(a.appendTo);
if (null != a.loadUrl) switch (a.contentContainer = b(a.contentContainer || c), a.content) {
case "iframe":
b('<iframe scrolling="no" frameborder="0"></iframe>').attr("src", a.loadUrl).appendTo(a.contentContainer);
break;
default:
a.contentContainer.load(a.loadUrl)
}
}).fadeIn(a.fadeSpeed, function() {
b.isFunction(p) && p.call(c);
u()
})
}
function o() {
a.modal && b(".bModal." + c.data("id")).fadeOut(a.fadeSpeed, function() {
b(this).remove()
});
c.stop().fadeOut(a.fadeSpeed, function() {
null != a.loadUrl && a.contentContainer.empty()
});
e.data("bPopup", 0 < e.data("bPopup") - 1 ? e.data("bPopup") - 1 : null);
a.scrollBar || b("html").css("overflow", "auto");
b("." + a.closeClass).die("click." + d);
b(".bModal." + d).die("click");
h.unbind("keydown." + d);
e.unbind("." + d);
c.data("bPopup", null);
b.isFunction(a.onClose) && setTimeout(function() {
a.onClose.call(c)
}, a.fadeSpeed);
return !1
}
function u() {
e.data("bPopup", k);
b("." + a.closeClass).live("click." + d, o);
a.modalClose && b(".bModal." + d).live("click", o).css("cursor", "pointer");
(a.follow[0] || a.follow[1]) && e.bind("scroll." + d, function() {
q && c.stop().animate({
left: a.follow[0] && !i ? h.scrollLeft() + g : g,
top: a.follow[1] && !i ? h.scrollTop() + f : f
}, a.followSpeed)
}).bind("resize." + d, function() {
if (q = s()) j = r(c, a.amsl), a.follow[0] && (g = m ? g : j[0]), a.follow[1] && (f = l ? f : j[1]), c.stop().each(function() {
i ? b(this).css({
left: g,
top: f
}, a.followSpeed) : b(this).animate({
left: m ? g : g + h.scrollLeft(),
top: l ? f : f + h.scrollTop()
}, a.followSpeed)
})
});
a.escClose && h.bind("keydown." + d, function(a) {
27 == a.which && o()
})
}
function r(a, b) {
var c = (e.width() - a.outerWidth(!0)) / 2,
d = (e.height() - a.outerHeight(!0)) / 2 - b;
return [c, 20 > d ? 20 : d]
}
function s() {
return e.height() > c.outerHeight(!0) + 20 && e.width() > c.outerWidth(!0) + 20
}
b.isFunction(n) && (p = n, n = null);
var a = b.extend({}, b.fn.bPopup.defaults, n);
a.scrollBar || b("html").css("overflow", "hidden");
var c = this,
h = b(document),
e = b(window),
k, d, q, l, m, i, j, f, g;
this.close = function() {
a = c.data("bPopup");
o()
};
return this.each(function() {
c.data("bPopup") || t()
})
};
b.fn.bPopup.defaults = {
amsl: 50,
appending: !0,
appendTo: "body",
closeClass: "bClose",
content: "ajax",
contentContainer: null,
escClose: !0,
fadeSpeed: 250,
follow: [!0, !0],
followSpeed: 500,
loadUrl: null,
modal: !0,
modalClose: !0,
modalColor: "#000",
onClose: null,
onOpen: null,
opacity: 0.7,
position: ["auto", "auto"],
positionStyle: "absolute",
scrollBar: !0,
zIndex: 9997
}
})(jQuery);
すべてのファイルは私のサイトの同じディレクトリにあります。
編集：これらは、コンソールエラーを実行したときに発生するエラーです
[18:14:51.018] GET http://www.onelineco.net/Blog.html [HTTP/1.1 200 OK 47ms]
[18:14:51.076] GET http://www.onelineco.net/animate.css [HTTP/1.1 304 Not Modified 68ms]
[18:14:51.077] GET http://www.onelineco.net/bPopup.js [HTTP/1.1 304 Not Modified 68ms]
[18:14:51.078] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 78ms]
[18:14:51.106] ReferenceError: jQuery is not defined @ http://www.onelineco.net/bPopup.js:23
[18:14:51.201] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 61ms]
[18:14:51.232] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://www.onelineco.net/Blog.html
[18:14:51.285] GET http://www.youtube.com/embed/iw8wDinJxBQ [HTTP/1.1 200 OK 141ms]
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@-moz-viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:14
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:17
[18:14:51.391] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.413] Unknown property '-moz-background-size'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.416] Error in parsing value for 'background'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.877] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.886] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ resource://dwhelper/util-service.jsm:567
[18:14:51.886] Use of attributes' ownerDocument attribute is deprecated. @ resource://dwhelper/util-service.jsm:567
[18:14:51.886] Use of attributes' nodeType attribute is deprecated. It always returns 2. @ resource://dwhelper/util-service.jsm:571
[18:14:51.886] Use of attributes' firstChild attribute is deprecated. Use value instead. @ resource://dwhelper/util-service.jsm:580