Я добавил всплывающие окна для каждой доступной опции, а также добавил несколько JavaScript, чтобы открыть определенные c всплывающие окна в зависимости от текущего выбора. Я добавил несколько базовых стилей c, кнопку закрытия в каждом всплывающем окне и немного убрал ваш код HTML.
function goToNewPage() {
if (document.getElementById('target').value) {
window.location.href = document.getElementById('target').value;
}
}
var search = document.getElementsByClassName("search-button")[0];
var datalist = document.getElementsByClassName("category")[0];
var popups = document.getElementsByClassName("popup");
search.addEventListener("click", function() {
var popupsLength = popups.length;
for (let x = 0; x < popupsLength; x++) {
popups[x].style.display = "none";
}
var popup = document.getElementsByClassName("popup " + datalist.value)[0];
popup.style.display = "block";
});
var exit = document.getElementsByClassName("exit");
var exitLength = exit.length;
for (let x = 0; x < exitLength; x++) {
exit[x].addEventListener("click", function(event) {
event.target.parentElement.style.display = "none";
});
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95%;
height: 95%;
max-height: 750px;
max-width: 1000px;
background: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
padding: 10px;
overflow: auto;
display: none;
z-index: 100;
}
.exit {
position: absolute;
top: 0;
right: 0;
padding: 10px 15px;
background: #dd3333;
color: white;
font-size: 20px;
transition: 0.2s;
}
.exit:hover {
background: #ee4444;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="header">
<form name="dropdown">
<select name="selected" id="target" accesskey="E">
<option value="" selected disabled>Select...</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://www.dogpile.com/">Dogpile</option>
</select>
<input type="button" value="Go" onclick="goToNewPage(document.dropdown.selected)">
</form>
<form>
<div class="form-box">
<input list="category" class="search-field category" placeholder="What service are you looking for?">
<datalist id="category">
<input type="hidden">
<option value="General Fitness">
<option value="Boxing">
<option value="Yoga">
<option value="Mixed Martial Arts">
<option value="White Collar Boxing">
</datalist>
<input type="text" class="search-field location" placeholder="Location?">
<button class="search-button" type="button">search</button>
</div>
</form>
</div>
<div class="popup General Fitness">
<h1>General Fitness</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ligula pretium tellus molestie rhoncus vel in leo. Aenean varius justo elit, sed euismod leo sagittis at. Fusce varius interdum consectetur. Ut id interdum nisi. Fusce mollis
et mi nec lobortis. Praesent ac turpis dignissim, interdum nulla ac, euismod augue. In sodales lobortis quam at ultrices. Donec id scelerisque sapien. Integer leo massa, aliquet ac est ut, mollis porttitor sem. Maecenas sed tellus elit. Aliquam
fringilla posuere urna vitae imperdiet. Sed ultricies, lectus quis tempor efficitur, dolor enim vestibulum mauris, in laoreet lorem ligula eget nisl.</p>
<span class="exit">✖</span>
</div>
<div class="popup Boxing">
<h1>Boxing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ligula pretium tellus molestie rhoncus vel in leo. Aenean varius justo elit, sed euismod leo sagittis at. Fusce varius interdum consectetur. Ut id interdum nisi. Fusce mollis
et mi nec lobortis. Praesent ac turpis dignissim, interdum nulla ac, euismod augue. In sodales lobortis quam at ultrices. Donec id scelerisque sapien. Integer leo massa, aliquet ac est ut, mollis porttitor sem. Maecenas sed tellus elit. Aliquam
fringilla posuere urna vitae imperdiet. Sed ultricies, lectus quis tempor efficitur, dolor enim vestibulum mauris, in laoreet lorem ligula eget nisl.</p>
<span class="exit">✖</span>
</div>
<div class="popup Yoga">
<h1>Yoga</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ligula pretium tellus molestie rhoncus vel in leo. Aenean varius justo elit, sed euismod leo sagittis at. Fusce varius interdum consectetur. Ut id interdum nisi. Fusce mollis
et mi nec lobortis. Praesent ac turpis dignissim, interdum nulla ac, euismod augue. In sodales lobortis quam at ultrices. Donec id scelerisque sapien. Integer leo massa, aliquet ac est ut, mollis porttitor sem. Maecenas sed tellus elit. Aliquam
fringilla posuere urna vitae imperdiet. Sed ultricies, lectus quis tempor efficitur, dolor enim vestibulum mauris, in laoreet lorem ligula eget nisl.</p>
<span class="exit">✖</span>
</div>
<div class="popup Mixed Martial Arts">
<h1>Mixed Martial Arts</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ligula pretium tellus molestie rhoncus vel in leo. Aenean varius justo elit, sed euismod leo sagittis at. Fusce varius interdum consectetur. Ut id interdum nisi. Fusce mollis
et mi nec lobortis. Praesent ac turpis dignissim, interdum nulla ac, euismod augue. In sodales lobortis quam at ultrices. Donec id scelerisque sapien. Integer leo massa, aliquet ac est ut, mollis porttitor sem. Maecenas sed tellus elit. Aliquam
fringilla posuere urna vitae imperdiet. Sed ultricies, lectus quis tempor efficitur, dolor enim vestibulum mauris, in laoreet lorem ligula eget nisl.</p>
<span class="exit">✖</span>
</div>
<div class="popup White Collar Boxing">
<h1>White Collar Boxing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ligula pretium tellus molestie rhoncus vel in leo. Aenean varius justo elit, sed euismod leo sagittis at. Fusce varius interdum consectetur. Ut id interdum nisi. Fusce mollis
et mi nec lobortis. Praesent ac turpis dignissim, interdum nulla ac, euismod augue. In sodales lobortis quam at ultrices. Donec id scelerisque sapien. Integer leo massa, aliquet ac est ut, mollis porttitor sem. Maecenas sed tellus elit. Aliquam
fringilla posuere urna vitae imperdiet. Sed ultricies, lectus quis tempor efficitur, dolor enim vestibulum mauris, in laoreet lorem ligula eget nisl.</p>
<span class="exit">✖</span>
</div>
</body>
</html>