Question

我目前正在尝试创建一个弹出框，该对话框应该指向一个触发它外观的元素。当用户点击第一个按钮时，箭头应指向按钮的中间，依此类推。

我知道如何使用css创建指向箭头，但问题是如何动态定位它以指向触发它外观的按钮。

请检查此JSFiddle HERE

/*  ========== CSS ==========  */
.container {
        background:white; 
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px; 
        width:100%; 
        height:150px;
        display: block;
        position: relative;
        margin-top:20px;
 }
    
#pointer {
        border-bottom:solid 10px #FFF;
        border-left: solid 8px transparent;
        border-right: solid 8px transparent;
        position:absolute;
        width: 0;
        height: 0;
        top: -10px;
        right: 20px;
 }

 <!-- ============== HTML =============== -->
 <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
 </div>
    
 <div class="container">    
    <div id="pointer"></div>
 </div>

你怎么看？感谢。

Answer 1

这会让你开始。

请注意，css已从指针right更改为left

$('.btn').click(function () {
    var $btn = $(this),
        position = $btn.position(),
        width = $btn.width(); 

    var pointerLeft = position.left + width / 2;

    $('#pointer').css('left', pointerLeft)
});

的 DEMO

Answer 2

您需要计算点击按钮的left位置，并添加半宽以将#pointer置于中心位置。

<强> CSS

.btn-group {
    position: relative;
}

<强>的jQuery

$('button').click(function(e) {
    var offset = $(this).position().left + ($(this).width() / 2);
    $('#pointer').css({'left': offset});
});

<强>的JavaScript

var buttons = document.getElementsByTagName('button');
var pointer = document.getElementById('pointer');
var pointerWidthOffset = pointer.offsetWidth / 2;

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(e) {
        var offset = e.target.offsetLeft + (e.target.offsetWidth / 2) - pointerWidthOffset;
        pointer.style.left = offset + "px";
    }, false);
}

动态更改指向箭头以指向点击源

2 个答案: