Just for your own edification, the term "responsive" usually refers to a site that responds to changes in screen size (for example, using CSS media queries to change the appearance of site based on whether the user is browsing on a mobile device or desktop.)
Going on, there are many solutions to your problem. One easy way (while avoiding any additional requests to the server), is to create hidden elements, and when a link is clicked, the element is shown.
See this jsbin example.
HTML
<button value="#box" id="box-button">Show info</button>
<div id="box">Some info is in this box<button class="x">x</button></div>
CSS
button {
cursor: pointer;
}
#box {
display: none;
position: absolute;
margin: auto;
left: 0; right: 0; top: 0; bottom: 0;
width: 50%; height: 50%;
padding: 1em;
box-shadow: 0 0 20px 0 #555;
border-radius: 10px;
background: #fff;
}
.x {
color: red;
position: absolute;
top: 0; right: 0;
padding: 10px;
border: none;
background: #fff;
}
jQuery
$('#box-button').on('click',function() {
$($(this).attr('value')).css('display','block');
});
$('.x').on('click', function() {
$(this).parent().css('display','none');
});
The downside of doing it like this is that, depending on how many pop-up boxes you have, the browser will have to load a lot more DOM elements, when maybe all of them won't be used.
Another way to do this is with AJAX calls, sort of like you referenced in your original question (but yes, there could be a hundred .html files, like you said).
The upside of this is that the DOM only contains what it needs at any given time. The downside is that you have to send a request to the server.
It'll be hard for me to make a jsbin example for this, so I'll provide you with a little code showing an example:
HTML
<button id="someButton" value="http://www.yourwebsite/someresource.html">show info</button>
<div id="popup"></div>
CSS
#popup {
display: none;
position: absolute; /* etc. */
}
jQuery
$('#someButton').on('click',function() {
$('#popup').load($(this).attr('value'));
});
