Question

我为Qlik Sense构建了一个扩展，它只是一个弹出模式。出于某种原因，似乎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很有帮助，但是现在的问题是，模式下是否有一个带有滚动条的文本框，那么该对象将与弹出窗口叠加或混合。我知道很奇怪的情况，但不确定如何解决。

Answer 1

问题在于Qlik Sense如何打包扩展。如果仅将def pytest_generate_tests(metafunc): for fixture in metafunc.fixturenames: if fixture in PROVIDER_MAP: parametrize_api(metafunc, fixture), indirect=True) add_fixture_to_pretest_args(metafunc, fixture) def add_fixture_to_pretest_args(metafunc, fixture): pretest_fixtures = list(metafunc._arg2fixturedefs['pretest'][0].argnames) pretest_fixtures.append(fixture) metafunc._arg2fixturedefs['pretest'][0].argnames = tuple(pretest_fixtures) @pytest.fixture(autouse=True) def pretest(test_skipper, logger, **kwargs): logger().info('running pretest checks') test_skipper()添加到CSS，它将覆盖CSS Qlik Sense在加载时适用。然后将其发布在所有内容之上。

important

Internet Explorer中的Qlik Sense Modal

1 个答案: