Kevin Powell - Community•5w ago

preview app feature to open link in same tab

i have three cards when i hover on them top div shows image of that card but when i click on it it opens the url assigned to it in new tab. BUT i have a new idea when i tap on it, it should open url assigned to it like "preview" just like macos does when we use spacebar to preview, so the link won't open in new tab. i hope i was able to explain this properly.

10 Replies

Chris Bolson•5w ago

You could achieve this by loading the content into a dialog or modal (basically the same thing).

Chris Bolson•5w ago

Take a look at this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

MDN Web Docs

: The Dialog element - HTML: HyperText Markup Language | MDN

The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

Chris Bolson•5w ago

You can either load the content into the "dialog" via JS or, probably simpler in your case, already have it within the dialog element on page load.

peterpumkineaterrOP•5w ago

looks like it will take lot of time so i'ma keep it on side for a while

Chris Bolson•5w ago

Not really, certainly less time than creating a whole new page for each section. Obviously it depends on what you actually want to show in these "preview" windows. A dialog can be created something like this:

<dialog>
  <button type="button" id="btn-dialog-close">Close</button>
  <div>your content goes here</div>
</dialog>
<button type="button" id="btn-dialog-open">Open</button>

<dialog>
  <button type="button" id="btn-dialog-close">Close</button>
  <div>your content goes here</div>
</dialog>
<button type="button" id="btn-dialog-open">Open</button>

const dialogEl = document.querySelector("dialog");
const btnDialogShow = document.getElementById("btn-dialog-open");
const btnDialogClose = dialog.getElementById("btn-dialog-close");

btnDialogShow.addEventListener("click", () => {
  dialogEl.showModal();
});

btnDialogClose.addEventListener("click", () => {
  dialogEl.close();
});

const dialogEl = document.querySelector("dialog");
const btnDialogShow = document.getElementById("btn-dialog-open");
const btnDialogClose = dialog.getElementById("btn-dialog-close");

btnDialogShow.addEventListener("click", () => {
  dialogEl.showModal();
});

btnDialogClose.addEventListener("click", () => {
  dialogEl.close();
});

By default it will open in the center of the viewport (depending on any CSS resets that you may have) and it can be styled just like any other element.

peterpumkineaterrOP•5w ago

i just want it to open url in it like you know <a href="google.html">

peterpumkineaterrOP•5w ago

take a look at this https://codepen.io/kev00690/pen/wvVVqmB

kev

CodePen

preview

...

peterpumkineaterrOP•5w ago

chat gpt made it and i improved it by css haha

Chris Bolson•5w ago

In that code you are loading the external url into an iframe which is then being displayed within a "modal" window. "manually" creating the modal window was the way this was done before the <dialog> element was added to HTML. The same thing can be achieved with a <dialog>

<button type="button" btn-dialog-open data-url="https://www.google.com">Open Google.com</button>
<button type="button" btn-dialog-open data-url="https://www.x.com">Open X.com</button>

<dialog >
  <button type="button" btn-dialog-close>Close</button>
  <iframe src="" frameborder="0"></iframe>
</dialog>

<button type="button" btn-dialog-open data-url="https://www.google.com">Open Google.com</button>
<button type="button" btn-dialog-open data-url="https://www.x.com">Open X.com</button>

<dialog >
  <button type="button" btn-dialog-close>Close</button>
  <iframe src="" frameborder="0"></iframe>
</dialog>

const dialogEl = document.querySelector("dialog");
const dialogIframe = dialogEl.querySelector("iframe");
const dialogCloseBtn = dialogEl.querySelector("[btn-dialog-close]");
const dialogOpenBtns = document.querySelectorAll("[btn-dialog-open]");

dialogOpenBtns.forEach(btn => {
  btn.addEventListener("click", (e) => {
    dialogIframe.src = btn.dataset.url;
    dialogEl.showModal();
  });
})

dialogCloseBtn.addEventListener("click", () => {
  dialogIframe.src = "";
  dialogEl.close();
});

const dialogEl = document.querySelector("dialog");
const dialogIframe = dialogEl.querySelector("iframe");
const dialogCloseBtn = dialogEl.querySelector("[btn-dialog-close]");
const dialogOpenBtns = document.querySelectorAll("[btn-dialog-open]");

dialogOpenBtns.forEach(btn => {
  btn.addEventListener("click", (e) => {
    dialogIframe.src = btn.dataset.url;
    dialogEl.showModal();
  });
})

dialogCloseBtn.addEventListener("click", () => {
  dialogIframe.src = "";
  dialogEl.close();
});

Very similar so it is up to you. One thing I will say though is that you shouldn't be attaching the eventListener to <div> or <span>. These should be buttons or, some might say that in this case they could be <a> elements (as technically they are opening an external URL).

peterpumkineaterrOP•4w ago

hey i was out man couldn't reply sorry bout that i understand it but then i thought it will be more useful if i use it for some smaller effects. not for bigger links

Gaming

Programming

preview app feature to open link in same tab