我试图低调和引导弹出窗口。我决定在里面添加一个按钮。但它没有按预期工作,因为它在关闭后读取内容。我使用屏幕阅读器NVDA来阅读页面(我希望它可以访问)
https://jsfiddle.net/devmyrrie/qv5vp9qc/
<button type="button" class='fa fa-question-circle claim-icon' data-placement='above'>Open Popover</button>
<div id="popover_content_wrapper" class="popover_content_wrapper" style="display:none">
<div>
Awesome example
</div>
<button type="button" id="fh-tooltip-close" class="fh-tooltip-close" aria-label="Close tooltip"> x
</button>
</div>
和Jquery:
$(document).ready(function () {
var claimIconState = false;
$('.claim-icon').popover({
html: true,
content: function () {
return $('#popover_content_wrapper').html();
}
})
$(".claim-icon").on('shown.bs.popover', function (e) {
//When a close tooltip button is clicked we need to bring focus back to the button who opened the tooltip
$(".popover-content").find('.fh-tooltip-close').on('click', function () {
//Focus to button that opend it
$('.claim-icon').focus();
$('.claim-icon').popover("hide");
});
});
$('.claim-icon').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
$('.fh-tooltip').attr("aria-hidden", "false");
});
});
当我点击关闭按钮时,它会读取现在消失的弹出窗口的内容。知道为什么吗?