JS: Opening a random video, image or link in overlay

Question

I am trying to make a random video, image or link open in an overlay using js and css, but I cannot get the overlay part correct.

<a id="overlay" href="javascript:openSite()">Click to go to a random site</a>
<script>
var links = [
              "google.com",
              "youtube.com",
              "stackoverflow.com",
              "apple.com"]

           var openSite = function() {
              // get a random number between 0 and the number of links
              var randIdx = Math.random() * links.length;
              // round it, so it can be used as array index
              randIdx = parseInt(randIdx, 10);
              // construct the link to be opened
              var link = 'http://' + links[randIdx];

     var win = window.open(link, '_blank');
     win.focus();

    };
</script>

And the css:

.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

Here is a jsfiddle

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"**Describe the problem.** "I cannot get the overlay part correct" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it. Use a brief but descriptive summary of your problem as the title of your question."_ — Andreas, Aug 18 '21 at 09:26
Thanks for pointing that out Andreas. How do I make the window open in the overlay? — micks88, Aug 18 '21 at 09:30
".overlay" is used for CSS-classes. Your html element just has an ID attribute! Change the dot to a # to refer the correct element! — stacj, Aug 18 '21 at 09:30
You can make use of [IFrames](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)! — stacj, Aug 18 '21 at 09:30

score 0 · Answer 1 · answered Aug 18 '21 at 09:34

Guess your looking for something like this:

Note that this isn't working in this snippet due to cross origin security policy!

var links = [
  "google.com",
  "youtube.com",
  "stackoverflow.com",
  "apple.com"
]

var openSite = function() {
  var randIdx = Math.random() * links.length;
  randIdx = parseInt(randIdx, 10);
  var link = 'https://' + links[randIdx];
  const iframe = document.createElement("iframe"); // create iframe
  iframe.classList.add("overlay"); // add overlay class
  document.body.append(iframe); // append to body
  iframe.src = link; // set iframe url to your random choosen link
};

.overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

<a href="javascript:openSite()">Click to go to a random site</a>

I can't really get it to work any other places either. It tries to load a page in the overlay which is exactly what I want, but a server-error occurs every time. — micks88, Aug 18 '21 at 11:39
https://stackoverflow.com/questions/8700636/how-to-show-google-com-in-an-iframe — stacj, Aug 18 '21 at 12:35

JS: Opening a random video, image or link in overlay

1 Answers1