'How to enable pop-up iframe work on same page in react nextjs app

I have a pop-up that works very well in my vanilla Html app properly, that is, when the button is clicked, it opens the pop-up and everything works fine.

The issue I am facing now is that when I use the code in my React, NextJS app, it loads the href and leaves the existing page, I am trying to find a way of ensuring the pop-up still works on the same page without going to another page.

Since the a tag was used in the initial code, I tried using the Link tag in NextJS maybe it would work but it was the same behavior.

Attached below is the code snippet.

import Link from "next/link"

<div className="footer-wrapper">
  {/* <Link href="https://app.giveforms.com/forms/listwise/donate?type=popup"><a data-giveform="gf-widget" className="button button-secondary w-button">Support Listwise</a></Link> */}
  <a data-giveform="gf-widget" href="https://app.giveforms.com/forms/listwise/donate?type=popup" className="button button-secondary w-button">Support Listwise</a>
</div>
javascripthtmlreactjsnext.jspopup


Solution 1:[1]

You need to setup widget:
example:

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Sorry but our website on maintenance</title>
        <meta name="description" content="Maintenance" />
        <script src="https://app.giveforms.com/new/widget-install.js" type="text/javascript"></script>
      </Head>

For me it`s helped

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 coderpy4

Related Questions