Javascript Popup in same tab

问题

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.

I have been adding the popups url into the selections but does not open the popups.

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?

Any help would be appreciated!

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>

回答1:

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">&#x2716;</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">&#x2716;</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">&#x2716;</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">&#x2716;</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">&#x2716;</span>
  </div>
</body>

</html>

来源：https://stackoverflow.com/questions/59717006/expertise-needed-for-datalist-and-submit-issues

标签

javascript

html

popup