Internet Explorer 中的 Qlik Sense 模式

Question

我为 Qlik Sense 构建了一个扩展，它只是一个弹出模式。出于某种原因，Qlik sense 似乎强制所有自定义扩展都具有 z-index: 1;。单击我的按钮时，我使用 jQuery 将其关闭，但它在 IE11 中不起作用。因此，我的模式出现在其他自定义扩展的后面，而不是在页面的前面或顶部。我不确定问题出在哪里，因为 jQuery 在 IE11 中有效。

这是我的 javascript:

define( [
        'jquery',
        './properties',
        'css!./style.css'
    ],
    function ($,  props ) {
        'use strict';
        return {
            definition: props,
            // Paint/Rendering logic
            paint: function ( $element, layout ) {
                var myHTML = "<button id='myBtn'>"+layout.props.buttonName+"</button>";

                // Build the div for the modal and it's content. 
                myHTML += '<div id="myModal" class="modal">';
                myHTML += '<div class="modal-content">'+
                    '<div class="modal-header">'+
                    '<span class="close">&times;</span>'+  // make an exit button to click on.
                    '<h2>'+layout.props.modalName+'</h2>'+
                    '</div>'+
                    '<div class="modal-body">'+layout.props.modalContent+'</div>'+
                    '</div></div>';     

                myHTML += "<script>var modal = document.getElementById('myModal');"+
                    'window.onclick = function(event){if(event.target==modal){modal.style.display = "none";}}</script>'

                $element.empty();
                $element.append( myHTML );

                $element.find('#myBtn').on('click', function() {
                    $('.qv-object').css("z-index", "unset")
                    $element.find('#myModal').css("display", "block")
                });
                $element.find('.close').on('click', function() {
                    $element.find('#myModal').css("display", "None")
                    $('article.qv-object').css("z-index", "1")
                });

            }
        };
    } 
);

和我的 css:

/* The Modal (background) */
.qv-object-my-modal div.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 200; /* Sit on top ~ doesn't seem to change placement in qlik*/
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.qv-object-my-modal div.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    border-radius: 25px;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.qv-object-my-modal span.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.qv-object-my-modal span.close:hover,
.qv-object-my-modal span.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.qv-object-my-modal div.modal-header {
    font-size: 8vh;
    padding: 2px 16px;
    background-color: #008CBA;  /* Blue */
    color: white;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
}

.qv-object-my-modal div.modal-body {
    padding: 2px 16px;
}

.qv-object-my-modal button {
    background-color:  #008CBA; /* Blue */
    border: solid 1 #0000ff;    /* Blue */
    color: white;
    padding: 1px 12px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em; 
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 8px;
}

.qv-object-my-modal button:hover {
    background-color:#ddd;
    color: black;
}

我已确认在 Chrome 中一切正常，但我的客户经常使用 IE，因此我需要确保它在两者中都能正常工作。任何人都知道可能会发生什么或我该如何解决它？

编辑： 将文章 z-index 更改为 9999 而不是 unset 有所帮助，但现在的问题是模态下方是否有一个文本框有滚动条，则该对象将覆盖或混合在弹出窗口中。我知道奇怪的情况，但我不确定如何解决。

Answer 1

问题在于 Qlik Sense 如何打包扩展。如果您只是将 important 添加到您的 CSS，它将覆盖加载时应用的 CSS Qlik Sense。然后它被张贴在一切之上。

.qv-object-my-modal {
    z-index: 999 !important;
}

Internet Explorer 中的 Qlik Sense 模式

Qlik Sense Modal in Internet Explorer

javascript

internet-explorer

modal-dialog

z-index

qliksense