js text highlight and div

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>
<body>
<article id="textDescription">
	<p>Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.</p>

<p>Due to a combination of problems, including rapid population growth, constrained water supplies and high levels of poverty, countries such as India, Indonesia, Bangladesh and Nigeria will be hit the hardest by this trend. Resource-constrained water stress will be the norm for many countries in Asia, while finance-constrained water stress will be the norm for many countries in Africa. This is reflected in the fact that experts surveyed by the World Economic Forum expect Sub-Saharan Africa to be the most affected region, closely followed by Asia.</p>
</article>
  <div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display:none;">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">comment</a></li>
    <li><a href="#">message</a></li>
  </ul>
</div>
</body>

::selection{
		background: rgb(153, 214, 255);
		color: black;
	}
	::-moz-selection{
		background: rgb(153, 214, 255);
		color: black;
	}
h1{ margin: 0; }
h2{ margin: 0; padding: 0; color: rgb(153, 214, 255); font-size: 14px;}
#textDescription{
		line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px;
	}
	.selectedText{
		position: relative;
		background-color: rgb(153, 214, 255);	color:black;	line-height: 1.2em;
	}	
	.popDiv{
		background: rgb(153, 214, 255); color: black; padding: 6px; width: 180px; height: 80px;  
		position: absolute; top: 18px; left: 0;
		border-radius: 4px; box-shadow: 2px 3px 4px #444;

-webkit-animation: slideIn .5s;
		animation: slideIn .5s;
	}

@-webkit-keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}

@-moz-keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}

@keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}

.modal-title
{
  font-size: 24;
  text-align: center;
}