Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make modal work with a fixed backdrop

Browse source
This commit is contained in:
Felix Niklas 2015-07-20 12:56:50 +02:00
parent ba6cf2d242
commit 92caa6402e
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/app/lib/bootstrap/modal.js
View file

@ -9,6 +9,7 @@
/* /*
modified by Felix Jan-2014 modified by Felix Jan-2014
- add this.$body = $(options.container || document.body) - add this.$body = $(options.container || document.body)
- adjustBackdrop: also adopt left, top and width from $body
*/ */
@ -233,6 +234,9 @@
Modal.prototype.adjustBackdrop = function () { Modal.prototype.adjustBackdrop = function () {
this.$backdrop this.$backdrop
.css('left', this.$body.offset().left)
.css('top', this.$body.offset().top)
.css('width', this.$body.width())
.css('height', 0) .css('height', 0)
.css('height', this.$element[0].scrollHeight) .css('height', this.$element[0].scrollHeight)
} }
@ -241,6 +245,9 @@
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({ this.$element.css({
left: this.$body.offset().left,
top: this.$body.offset().top,
width: this.$body.width(),
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
}) })

5
app/assets/stylesheets/zammad.css.scss
View file

@ -4318,14 +4318,9 @@ footer {
.modal.modal--local { .modal.modal--local {
display: block; display: block;
padding-left: 40px; padding-left: 40px;
position: absolute;
bottom: auto;
min-height: 100vh;
.modal-backdrop { .modal-backdrop {
position: absolute;
background: hsla(210,17%,93%,.55); background: hsla(210,17%,93%,.55);
height: 100% !important;
opacity: 1; opacity: 1;
} }