Qlik Sense Modal in Internet Explorer

Question

I built an extension for Qlik Sense which is simply a pop-up modal. For some reason, it seems Qlik sense forces all custom extensions to have z-index: 1;. I used jQuery to turn this off on when my button is clicked, but it will not work in IE11. Because of this my modal is coming up behind other custom extensions instead of in front or on top of the the page. I'm not sure what the problem is since jQuery works in IE11.

Here is my 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")
                });

            }
        };
    } 
);

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

I have confirmed that everything works properly in Chrome but my clients use IE often enough that I need to make sure it works in both. Anyone have an idea of what could be going on or how I could fix it?

EDIT: Changing the article z-index to 9999 instead of unset helped but now the problem is if there is a text box beneath the modal that has a scroll bar, then that object will overlay or mix in with the pop-up. Weird scenario I know but I'm not sure how to fix it.

Answer 1

The problem is how Qlik Sense packages extensions. If you just add important to your CSS it will overwrite the CSS Qlik Sense applies upon loading. Then it is posted on top of everything.

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