在模式onclick中显示锚标记标题属性的Javascript

Question

Just wondering if you can point me in the right direction here. I have this PHP code and want to be able to use onclick on dynamically created links to display the link's title in a modal window with close option. Sort of like a tooltip. Don't want to use the native browser tooltip. Am assuming Javascript would be best? Any pointers would be very much appreciated.

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

Add a class to the links (say, 'alertTitle'). Then, here's the JS that could help you, if I get the question right:

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
}

Here's the working example: JSFiddle

Answer 2

您可以使用bootstrap或其他css / js框架显示模式并自定义模式显示方法，如下所示：

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

Answer 3

Use the event listener $('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> 

View on JSFiddle