GarethElms
SlideFromBelow/SlideFromAbove don't animate & get stuck in original, non-centered position
Worked in 0.31. No longer working in 0.3.2
Looked at diffs. It looks like the following if statement was removed from the ShowModal function, when either SlideFromBelow or SlideFromAbove options are true.
if (coords.isEmpty()) {
animateProperties.top = positionY;
} else {
animateProperties.top = coords.top;
}
When I add this condition back, animation works again.
Hi thanks for reporting this.
The "Anchored to header (right)" option works in the example and is using 0.32 : http://www.garethelms.org/demo/backbone-js-modal-dialog/demo.html so it at least works on that page. Can you tell me your browser and version. If you can, a stripped down test page exhibiting the problem would be great.
In fact I'm struggling to find in the history the exact code you've quoted! Can you link to the change that is causing the problem?
Embarrassingly, I looked at previous versions of Modal View here on Github and didn't see the solution I mentioned above either. So this is not a regression from 0.31 to 0.3.2.
Umm, there's a good chance that I may have tracked this down on an earlier version and added it to my own local copy. It looks like I replaced lines 374 and 380 with that block of code I mentioned. (Sorry, I neglected to document this, so I don't recall why.)
The "anchored to header (right)" option in the demo link works for me too. I'm using Chrome 28.0.1500.95, win7 64bit.
Here's some demo code that doesn't do the animate.
<html>
<head>
<script src="ext/jquery-1.10.2.min.js"></script>
<script src="ext/underscore-1.4.3.min.js"></script>
<script src="ext/backbone-0.9.9.min.js"></script>
<script src="ext/Backbone.ModalDialog-0.3.2.js"></script>
<script type="text/javascript">
var TemplateModalView = Backbone.ModalView.extend({
name: 'TestModal',
initialize: function (attrs) {
"use strict";
_.bindAll(this, 'render');
this.template = _.template($('#test-template').html());
this.attrs = attrs;
},
render: function () {
"use strict";
$(this.el).html(this.template());
return this;
}
});
$(function () {
$('#theBtn').bind('click', function (e) {
"use strict";
var testView = new TemplateModalView();
testView.render().showModal({
'backgroundClickClosesModal': true,
'pressingEscapeClosesModal': true,
'slideFromBelow': true,
'showCloseButton': false,
'css': {
'background-color': '#fff',
'border': '2px solid #666',
'-webkit-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'-moz-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'-webkit-border-radius': '4px',
'-moz-border-radius': '4px',
'border-radius': '4px',
'padding': '1.5em 0.9em'
}
});
});
});
</script>
</head>
<body>
<button id="theBtn">Click</button>
<script type="text/html" id="test-template">
<div class="content-container">
<h1 class="modal-header"> Test 1 2 3 </h1>
Hello, bonjour, buenos dias
</div >
</script>
</body>
</html>
Ah, think I remember my reasoning for the code. It looks like the slideFromBelow animation works if you add a 'top' value in the css options.
testView.render().showModal({
'backgroundClickClosesModal': true,
'pressingEscapeClosesModal': true,
'slideFromBelow': true,
'showCloseButton': false,
'css': {
'top': '0px',
'background-color': '#fff',
'border': '2px solid #666',
'-webkit-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'-moz-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
'-webkit-border-radius': '4px',
'-moz-border-radius': '4px',
'border-radius': '4px',
'padding': '1.5em 0.9em'
}
I want my modals to end up in the center of the screen. Since you already do those calculations in your js to center the modal, I figured I would use your calculations instead of re-duplicating them in my code.
Think I've fixed it. I've put up a test at : http://garethelms.org/demo/backbone-js-modal-dialog/slide-test.html
The change I made was to add a null check when assigning animateProperties.top eg;
animateProperties.top = coords.top || modalOffset.top;
The changes are on line 374 and 380 here : http://garethelms.org/demo/backbone-js-modal-dialog/Backbone.ModalDialog.debug.js
Let me know if that fixes it for you in your web app and I'll update the repo.
Cheers