javascript - 固定位置在 IE 10 与 Bootstrap Modal 中的 Chrome 和 Firefox 中表现不同

Question

We have some popup pickers, and the one edge case that this code isn't working for is internet explorer when the picker is inside a bootstrap modal... To me it looks like chrome and firefox is left relative to the edge模态的，但即相对于页面的边缘。

.pickerModal
{
background-color: #fff;
display: none;
position: fixed;
width: auto;
min-width: 150px;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
border: solid rgba(103,103,103,1) 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
z-index: 1051 !important;
padding: 0;
}

self.positionPicker = function (launchSelector, modal, modalPointer) {  

    var gCoord = launchSelector.localToGlobal(0, 0);
    var modalOffset = { top: 0, left: 0 };
    var modalWidth = 0;
    var scroll = document.documentElement.scrollTop || document.body.scrollTop;     

    if ($(launchSelector).closest('.modal-dialog').length) {

        var bootstrapModal = $($(launchSelector).closest('.modal-dialog')[0]);

        modalOffset = bootstrapModal.offset();
        modalWidth = bootstrapModal.width();

    }

    modalPointer.css({
        "top": (gCoord.y + launchSelector.height()) - modalOffset.top - scroll,
        "left": gCoord.x - modalOffset.left
    });

    if (modalWidth == 0) {
        modal.css({
            "top": (gCoord.y + launchSelector.height() + 7) - modalOffset.top - scroll,
            "left": (gCoord.x + modal.width()) > (window.screen.availWidth - 15) ? gCoord.x - ((gCoord.x + modal.width()) - modalOffset.left - (window.screen.availWidth - 15)) : gCoord.x
        });
    } else {            

        modal.css({
            "top": (gCoord.y + launchSelector.height() + 7) - modalOffset.top - scroll,
            "left": gCoord.x + modalOffset.left + modal.width() < $(window).width() ? Math.max(0, gCoord.x - modalOffset.left) : Math.max(0, gCoord.x - modalOffset.left - modal.width() + 10)
        });
    }

    if (modal.position().top < 0) {
        self.hideModal(self.modal());
    }

}

Answer 1

找到答案:

/** 
* This is needed so that the pickers position correctly in all browsers in  modal or non modal windows.  
* Bootstrap css has some magic that makes fixed position elements relative to modal instead of page in chrome and firefox.
*/
.modal.in .modal-dialog 
{ 
 -moz-transform: none;
 -ms-transform: none;
 -o-transform: none;
 -ms-transform: none;
 transform: none;
}