javascript - 如何使图层弹出窗口更易于访问？

Question

我刚刚制作了图层弹出窗口，我想让它更易于访问。

这是我迄今为止尝试过的

<p><a href="#target" class="layer">Open layer1</a></p>

<p><a href="#target2" class="layer">Open layer2</a></p>


<div id="target" class="hidden">
  layer1
 <button class="close">clos</button>
</div>


<div id="target2" class="hidden">
  layer2
 <button class="close">clos</button>
</div>



$(document).ready(function() {
  $.fn.layerOpen = function(options) {
    return this.each(function() {
      var $this  = $(this);
      var $layer = $($this.attr('href') || null);
      $this.click(function() {
        $layer.attr('tabindex',0).show().focus();
        $layer.find('.close').one('click',function () {
          $layer.hide();
          $this.focus();
        });


      });
    });
  }
  $('.layer').layerOpen();
});

任何人都可以有一个更易于访问的代码的想法吗？或者有什么例子吗？谢谢。

Answer 1

避免绑定(bind)多个点击事件。还可以使用 hash 属性代替 href 属性。

我建议你做这样的事情:

$.fn.layerInit = function(options) {
  return this.each(function() {
    var $this = $(this), hash = $this.prop('hash'), $layer;
    if (hash) {     
      $layer = $(hash).attr('tabindex', 0);
      $this.on('click.layer', function() {
        $layer.show().focus();
      });
      $layer.find('.close').on('click.layer', function() {
        $layer.hide();
        $this.focus();
      });
    }
  });
};

$(document).ready(function() {
  $('.layer').layerInit();
});