return Marionette.ItemView.extend({
className: 'modal',
overlayClassName: 'modal-overlay',
+ htmlClassName: 'modal-open',
events: function () {
return {
onRender: function () {
var that = this;
this.$el.detach().appendTo($('body'));
+ $('html').addClass(this.htmlClassName);
this.renderOverlay();
this.keyScope = key.getScope();
key.setScope('modal');
that.close();
return false;
});
+ this.show();
+ },
+
+ show: function () {
+ var that = this;
+ setTimeout(function () {
+ that.$el.addClass('in');
+ $('.' + that.overlayClassName).addClass('in');
+ }, 0);
},
onClose: function () {
+ $('html').removeClass(this.htmlClassName);
this.removeOverlay();
key.deleteScope('modal');
key.setScope(this.keyScope);
.modal {
position: fixed;
z-index: 9000;
- top: 15%;
+ top: 0;
left: 50%;
margin-left: -270px;
width: 540px;
background-color: #fff;
+ opacity: 0;
+ .trans;
+}
+
+.modal.in {
+ top: 15%;
+ opacity: 1;
}
.modal-overlay {
position: fixed;
z-index: 8999;
top: 0; bottom: 0; left: 0; right: 0;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgba(0, 0, 0, 0.7);
+ opacity: 0;
+ .trans;
+}
+
+.modal-overlay.in {
+ opacity: 1;
+}
+
+.modal-open {
+ overflow: hidden;
}