I browsed for some jquery modal forms that made use of ajax and settled for one with a push animation. I can get things working fine within the same html page, but when I make my form on a diff page and try call it in, nothing happens. Help hugely appreciated.
Have tried both target & url
report.html is in the same dir as the html the above script is in
it just says ‘error to load report.html’
Eh Pullo, thanks for reply. Partner has secured server with some framework that defines access, so I can’t even make a public folder! I will get some free space after work and link here. For now, console is giving this…
Below gives error: custombox is undefined…
<script>
$(document).ready(function(){
$('#option-ri').on('click', function ( e ) {
Custombox.open({
url: 'report.html',
effect: 'push',
cache:false,
});
e.preventDefault();
});
});
</script>
css & js added…how else can I define it? Will upload after work
I think so! It works fine if I call a DOM on the same page. Surely the form I’m calling in doesn’t need the js & library applied?
So I’ve mocked the same thing and uploaded it. tmp.html has the js, library and script call. report.html should scroll in pushing the content into tmp.html
Think I’ll have to give up with this and find a different animated modal plugin =(
not a clue why object isn’t supporting method custombox… applied latest jquery and did everything I could think of. Probably something simple, but this time custombox wins and I lose!
Nice 1 Pullo. I copied library urls same as example. On tmp page I made 2 links. ‘Link’ and ‘Same Ajax Example’.
Same ajax example is now getting the modal in view…but there’s no animation and its not in view like it should be…it’s pushing the under content (z-index?) The custombox js should be applying this anyway.
As for the ‘Link’ there’s some ‘Uncaught reference error - custombox not defined’
Ok, well on further inspection, the plugin seems to be a little buggy.
I could only get it working using the files on the demo page directly. The downloadable files din’t work for me.
Then for a non-ajax modal, you need the markup on the same page:
<div id="modal" style="display: none;" class="modal-example-content">
<div class="modal-example-header">
<button type="button" class="close" onclick="$.fn.custombox('close');">×</button>
<h4>jQuery Custombox</h4>
</div>
<div class="modal-example-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
Then a trigger (note that the href is the same as the id for the modal):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Custom Box Plugin Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/css/demo.css">
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.css">
<style>p { padding: 10px;}</style>
</head>
<body>
<a href="#modal" class="list-group-item" id="sidefall">Sidefall</a>
<div id="modal" style="display: none;" class="modal-example-content">
<div class="modal-example-header">
<button type="button" class="close" onclick="$.fn.custombox('close');">×</button>
<h4>jQuery Custombox</h4>
</div>
<div class="modal-example-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.js"></script>
<script>
$('#sidefall').on('click', function () {
$.fn.custombox( this, {
effect: 'sidefall'
});
return false;
});
</script>
</body>
</html>
<div class="modal-example-content">
<div class="modal-example-header">
<button type="button" class="close" onclick="$.fn.custombox('close');">×</button>
<h4>jQuery Custombox with AJAX!</h4>
</div>
<div class="modal-example-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
Yeah seems quite buggy… I can’t get it to work through ajax but on page was fine. Shame cause I the push effect would have suited…nevermind, I’ll just go with something else.
Have gone with featherlight…its well documented and working as intended But now I have another problem, which I’m not sure how to do…I’ll make a new post for this though, as it isn’t related.