同一选项卡中的Javascript弹出窗口 [英] Javascript Popup in same tab
本文介绍了同一选项卡中的Javascript弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找有关我遇到的问题的帮助，我已经尝试了很多次才能使它起作用.
I'm looking for help on a issue im having, ive tried many times to get this working..
我希望能够通过选择数据列表中的项目来打开特定的弹出窗口，每个项目都会打开自己的弹出窗口，这些弹出窗口在内部都有关于用户选择的特定形式.例如，选择一般健康状况"并按提交"以打开一般健康状况"弹出窗口.
I want to be able to open specific popups through the selection of items on a datalist, each item opens its own popup which all have specific forms inside regarding the selection from the user. E.g selecting general fitness and pressing submit opens the general fitness popup.
我一直在将弹出窗口URL添加到选择中，但是没有打开弹出窗口.
I have been adding the popups url into the selections but does not open the popups.
HTML是我的，但是我发现了一个看起来有点像我需要的脚本，除了这会在新窗口中打开一个链接.也许可以对其进行编辑以节省时间?
The HTML is mine but I have found a script that looks a little like what i need, except this opens a link in a new window. Maybe this can be edited to save time?
任何帮助将不胜感激！
function goToNewPage() {
if (document.getElementById('target').value) {
window.location.href = document.getElementById('target').value;
}
}
<body>
<div class="header">
<form name="dropdown">
<select name="selected" id="target" accesskey="E">
<option selected>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>
</body>
推荐答案
我为每个可用选项添加了弹出窗口，还添加了一些JavaScript以根据当前选择打开特定的弹出窗口.我添加了一些基本样式，在每个弹出窗口上添加了一个关闭按钮，并对HTML代码进行了一些整理.
I have added popups for each available option and have also added some JavaScript to open specific popups depending on the current selection. I have added some basic styling, a close button on each popup and have tidied up your HTML code a little bit.
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>
这篇关于同一选项卡中的Javascript弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
