Internet Explorer 中的 Qlik Sense Modal

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;
}