點擊鏈接並調整位置時顯示彈出框

我正在嘗試在頁面上的鏈接旁邊創建一個小彈出窗口。我需要這是動態的，因爲生成的鏈接數是隨機的。我希望框每次都顯示在鏈接旁邊，所以這需要將位置調整爲新的座標。我的問題是，如何基於單擊哪個鏈接以編程方式確定將框移動到何處？我不知道如何解決這個問題，並正在尋找一些建議。點擊鏈接並調整位置時顯示彈出框

HTML

<div style="display: none; border: 1px solid black; height: 150px; width: 250px; 
     padding: 5px; position: absolute; left: 100px; top: 100px; 
     background-color: silver;" id="messageBox"> 
    <textarea style="width: 225px; height: 115px;"></textarea> 
    <button id="save" style="float: right;">Save</button> 
</div> 

<div class="productLine"> 
    <a href="#">Link #1</a><br /><br /> 
    <a href="#">Link #2</a><br /><br /> 
</div> 
<br /> 
<div class="productLine"> 
    <a href="#">Link #3</a><br /><br /> 
    <a href="#">Link #4</a><br /><br /> 
</div>

的jQuery：

$('.productLine a').click(function() { 
    $('#messageBox').toggle(); 
});

來源

2013-06-20 ios85

你可以試試這個 - （你可以添加寬度和a左側和頂部高度在適當的位置展示盒）

$('.productLine a').click(function() { 
    var $this = $(this); 
    $('#messageBox').css({ 
     left: $this.position().left + $this.width(), 
     top: $this.position().top, 
    }).toggle(); 
});

演示----->http://jsfiddle.net/esEP8/2/

來源

2013-06-20 14:41:21

使用點擊鏈接的position().left和position().top定義彈出位置。此外，最好使用on而不是click。下面是代碼：

$('.productLine').on('click', 'a', function() { 
    $('#messageBox').hide().css({ 
    left: $(this).position().left + $(this).outerWidth(false), 
    top: $(this).position().top 
    }).show(); 
});

的jsfiddle：http://jsfiddle.net/9XTT6/2/

來源

2013-06-20 14:46:24

點擊鏈接並調整位置時顯示彈出框

回答

相關問題