<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a href="#" class="select-text" data-selector="#{{ Class }}a">&#10133;</a>


<div id="{{ Class }}a" class="modal-body">




</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery.fn.selectText = function(){
  this.find('input').each(function() {
      if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
          $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
      }
      $(this).prev().html($(this).val());
  });
  var doc = document;
  var element = this[0];
  console.log(this, element);
  if (doc.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
  } else if (window.getSelection) {
      var selection = window.getSelection();        
      var range = document.createRange();
      range.selectNodeContents(element);
      selection.removeAllRanges();
      selection.addRange(range);
  }
};

$('.select-text').on('click', function(e) {
  var selector = $(this).data('selector');
  $(selector).selectText();
  e.preventDefault();
});

});//]]>

</script>

<style>
.select-text,.select-text:visited {
background-color: #f00;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: #fff;
border:1px solid #000;
margin-left:20px;
text-decoration:none;
}
.select-text:hover,.select-text:active {
background-color: #369;
border:1px solid #000000;
color:#fff;
text-decoration:none;
}
</style>