我刚刚制作了图层弹出窗口,我想让它更易于访问。
这是我迄今为止尝试过的
<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();
});
任何人都可以有一个更易于访问的代码的想法吗?或者有什么例子吗? 谢谢。
最佳答案
避免绑定(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();
});
关于javascript - 如何使图层弹出窗口更易于访问?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53221067/