I have the following code but this doesn't work. I expect a local html file to be loaded by ajax call it doesnot work as expected. It simply displays 'hello how are you' whilst it should have displayed contents from another html file.
Here is the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<style>
#element_to_pop_up {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.b-close {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
</style>
</head>
<body>
...
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
Hello. wow. How are you?
</div>
...
<script>
// 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').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({
content: 'iframe', //'ajax', 'iframe' or 'image'
contentContainer: '.content',
loadUrl: '1.html'
});
});
});
})(jQuery);
</script>
</body>
</html>
You do not have a Container with the class name "content". This should work: