时间戳

首页 > 解决方案 > 可点击的信息框

javascript - 可点击的信息框

问题描述

我如何编辑此页面的 JS（或 CSS？）（http://thepostrider.com/2018-senate-election/）以使“信息框”停止出现故障，并使每个状态都可点击信息框弹出，您可以阅读它，直到点击另一个状态？

这是JS：

    $("path, circle").click(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() {
    var link = $(this).attr('href');
    window.open(link,'_blank');
    return false;
  });
}

标签： javascriptfunction

解决方案

在 CSS 中，您可以将信息框的位置更改为absolute而不是relative. 当你这样做时，它不会影响剩余网站的位置。然后，您需要为信息框提供正确的坐标以将其定位在页面上。

如何将一个div覆盖在另一个div上

这里有答案中的详细解释。

推荐阅读