我正在开发一个小项目，我试图从按钮实现一个弹出窗口。我正在使用我在此开发者网站bPopup上找到的代码。我玩JSFiddle上的代码并且它可以正常工作但是当我将代码上传到我的网站时它无法正常工作。我试着玩我引用jquery和bpopup javascript文件的方式，但仍然没有。我也调查了DOM Ready问题，我相信我很好，但也许我错了。
当我使用这三个文件运行网站时，输出是一个按钮，当我点击它时没有任何反应，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
答案 0 :(得分：0)
您必须在依赖于它的其他脚本之前加载jQuery。
<script src="jquery-1.8.2.min.js"></script>
<script src="bPopup.js"></script>