Question

我创建这段代码来创建动态弹出窗口，但是在IE8中无效。

我可以使用的是告诉我IE8对此功能有部分支持 - ＆gt; http://caniuse.com/#search=data-

这是代码：

HTML：

  <div class="popup" data-ride="popup"></div>
  <a href="#" data-popup="open">Abrir</a>
  <a href="#" data-popup="close">Fechar</a>

CSS：

body {
  margin: 0 auto;
}
.popup {
  position: fixed;
  background-color: black;
  opacity: 0.9;
  display: none;
}

JS：

+function ($) {
  'use strict';

  function PopUp(element) {
    this.element = element;
    this.width = '100%';
    this.height = '100%';

    this.setSize();
  }

  PopUp.prototype.setSize = function() {
    var self = this;

    $(self.element).css('width', self.width);
    $(self.element).css('height', self.height);
  };


  var clickHandler = function (e) {
    var element = this;
    var action = $(element).data('popup');

    if (action === 'close') {
      $('.popup').hide();
    } else {
      $('.popup').show();
    }

    e.preventDefault();
  };

  $(document).on('click', '[data-popup]', clickHandler);

  $(window).on('load', function () {
    $('[data-ride="popup"]').each(function () {
      var $popup = $(this);
      $popup = new PopUp($popup);
    });
  });

}(jQuery);

在IE9 +，Firefox和Chrome中100％正常工作。

示例：

http://codepen.io/celicoo/pen/yyWqWm

Answer 1

根据IE 10 - IE 8的文档，您必须使用jQuery的attr()函数。

就在这一行，var action = $(element).data('popup');

您需要var action = $(element).attr('data-popup');

数据 - 在IE8中不起作用

1 个答案: