Load page using modal ajax + jquery
Question
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/
Since I'm a newb with javascript I can't figure out the documentation. 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:
$('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. 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?
3 answers
solution1
1 2014-02-27 23:38:00
Try finding the element using the # char, because you are trying to find by id.
<script>
$(document).ready(function() {
$('#element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
});
</script>
solution2
1 ACCPTED 2014-02-27 23:55:28
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:
<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>
solution3
1 2014-07-22 16:28:07
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.