[英]Load page using modal ajax + jquery
I can't for the life of me figure out how to load external page in a modal popup box. 我一辈子都想不起来如何在模式弹出框中加载外部页面。 I'm using modal popup box from http://dinbror.dk/bpopup/
我正在使用http://dinbror.dk/bpopup/中的模式弹出框
Since I'm a newb with javascript I can't figure out the documentation. 由于我是使用javascript的新手,因此我无法弄清楚文档。 I can load a regular popup box, that's easy for me, but when it comes to loading ajax in modal, I have no idea where to declare this in the html document:
我可以加载一个常规的弹出框,这对我来说很容易,但是当涉及到以模式加载ajax时,我不知道在html文档中的哪里声明:
$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
This script supposed to load test.html in a popup, and it does not. 该脚本应该在弹出窗口中加载test.html,但不会。 It loads a blank popup box instead.
而是加载一个空白的弹出框。
Here is what I tried to do to make this work: 这是我尝试做的工作:
<button id="my-button">Pop it Up</button>
<div id="element_to_pop_up">
<!-- Ajax Javascript that supposed to popup in modal-->
<script>$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});</script>
</div>
Any ideas what I'm screwing up? 有什么想法要解决吗?
Try finding the element using the #
char, because you are trying to find by id. 尝试使用查找元素
#
字符,因为你试图通过ID查找。
<script>
$(document).ready(function() {
$('#element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
});
</script>
You are close. 你近了 What you are missing is you need to bind an onclick event to your button and put it inside of the $(document).ready like so:
您缺少的是需要将onclick事件绑定到按钮并将其放在$(document).ready中,如下所示:
<script>
$(document).ready(function() {
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
});
});
</script>
This is the test page you want: 这是您想要的测试页:
<html>
<head>
<style>
#element_to_pop_up { display:none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script>
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
});
});
})(jQuery);
</script>
</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">Content of popup</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.