Question

我正在制作一个有弹出窗口的网络应用幻灯片演示文稿。弹出窗口没有出现在IE9中，我试图弄清楚它是否是一个兼容性问题，或者是否有另一种方法来编码弹出窗口的淡入淡出，以便它在IE9中正常工作。有帮助吗？以下是相关的代码：

HTML：

<div id="bottom_btn_container_2btns" style="text-align:left"> 
  <a class="bottom_btn js-expandable" data-popup="popup-1">STUDY DESCRIPTION</a> <br/>
  <a href="linkEliq_irgo_1_3_1.html"class="bottom_btn">ADDITIONAL STUDIES</a> 
  <!--<a class="bottom_btn js-expandable" data-popup="popup-2" >ADDITIONAL STUDIES</a>-->       
</div>

HTML Popup：

<div class="popup" id="popup-1">
<div class="popup-inner" style="height:490px; width:820px;margin-left:120px">
  <div class="popup-content">
    <div class="tac">
      <header>
        <h4 style="margin-bottom:5px;">Study Description<sup>1</sup></h4>
      </header>
      <article> //and then the content starts

相关JS：

  var initExpandables = function () {
    $(document).on('click', '.js-expandable', function (e) {
        e.preventDefault();

        var expandableElem = $(this),
            popupId = expandableElem.data('popup');

        $('#' + popupId).addClass('popup-opened');
    });
};

我很难找到IE9和JS / Jquery之间是否存在冲突。我想也许CSS可能是问题，但它似乎在Chrome和FF中运行良好。以下是相关的CSS：

#bottom_btn_container_2btns {
position: absolute;
float: right;
left: 768px;
bottom: 100px;
z-index: 8000;
height: 85px;
width: auto;
text-align:right;
margin-bottom:1px;
}

.popup和.popup-opened的CSS：

.popup {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
z-index: 9700;
background: rgba(255, 255, 255, 1);
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}   

.popup-opened {
pointer-events: all;
opacity: 1;
}

如果IE9是问题，那么是否有另一种方法可以让弹出窗口与IE9兼容？提前谢谢！

IE9是否支持使用JQuery的可扩展弹出窗口？ IE9是否以不同于Firefox的方式处理这种脚本？

0 个答案: