Internet Explorer中的Qlik感知模式

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