JavaScript以模态ONCLICK显示锚标记标题属性

Question

只是想知道您是否可以在此处指向正确的方向。我有此PHP代码，并希望能够在动态创建的链接上使用OnClick在带有Close选项的模式窗口中显示链接标题。有点像工具提示。不想使用本机浏览器工具提示。我假设JavaScript最好？任何指针都将不胜感激。

while ($row = $result->fetch_assoc())
{ ?> 
<a style="font-size:16px;" ID="<? echo $row['ID'] ?>" title="<? 
echo  $row ['title']  ?> 
by
<? echo $row ['author'] ?>"><span title=""><? echo $row ['first_line'] ?>
</span></a>
<?
echo "&nbsp"; 
if ($count >= 6) 
{ 
echo '<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
$count = 0; 
} else { 
$count++; } 
}

Answer 1

将类添加到链接中（例如'alerttitle'）。然后，这是可以帮助您的JS，如果我正确的问题：

var els = document.getElementsByClassName('alertTitle');
// Add event listener to each
for (var i = 0; i < els.length; i++){
  els[i].onclick = function(){
  window.alert(this.title); // You could do anything with this.title
}

这是工作示例：jsfiddle

Answer 2

您可以使用Bootstrap或其他CSS/JS框架显示模式并自定义模态显示方法如下：

`http://jsfiddle.net/saeedsalehi/1aeur58f/665/`

Answer 3

使用事件侦听器$('a').on()：

var modal = $('#my-modal');
$('a').on('click', function() {
  var title = $(this).attr('title');
  modal.find('.modal-title').text(title);
  $('#my-modal').modal('show');
});

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<a href="#1" id="1" title="Title 1">Link 1</a><br/>
<a href="#2" id="2" title="Title 2">Link 2</a><br/>
<a href="#3" id="3" title="Title 3">Link 3</a><br/>
<div id="my-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在JSFIDDLE上查看