title: Creating a link in js and removing the popup in my script
body: <p>In the following script <code>index.html</code>:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; &gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;جستجوگر فیلم و سریال | IMDB And OMDB&lt;/title&gt;
    &lt;link rel='stylesheet' href=''&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- partial:index.partial.html --&gt;
  &lt;div id='app'&gt;&lt;/div&gt;
  
  &lt;!-- Courtesy to OMDB API --&gt;
  &lt;!-- partial --&gt;
    &lt;script src=''&gt;&lt;/script&gt;
  &lt;script src=''&gt;&lt;/script&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>In the following script <code>style.css</code>:</p>
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&amp;display=swap&quot;);
  * {
    box-sizing: border-box;
    font-family: &quot;Roboto Condensed&quot;, sans-serif;
  }
  
  body {
    background: linear-gradient(to right, #42275a, #734b6d);
    margin: 0;
    padding: 0;
  }
  body::-webkit-scrollbar-track {
    background-color: #734b6d;
  }
  body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #42275a;
  }
  
  img {
    max-width: 100%;
  }
  
  .head {
    text-align: center;
    font-size: 1.5rem;
    color: #a8e063;
    text-shadow: 0 13.36px 14.896px #42275a;
    margin: 20px;
  }
  
  .search {
    height: 100px;
    display: grid;
    place-content: center;
  }
  .search-box {
    display: flex;
    transition: all 0.2s ease;
  }
  .search-box:focus-within {
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3);
  }
  .search-box input {
    appearance: none;
    border: 0;
    outline: 0;
    height: 40px;
    background-color: white;
    padding: 0 10px;
    min-width: 350px;
  }
  .search-box button {
    appearance: none;
    border: 0;
    outline: 0;
    height: 40px;
    background-color: white;
    padding: 0 10px;
    cursor: pointer;
  }
  
  .cards {
    animation: poof 0.5s;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: minmax(min-content, max-content);
    padding: 10px;
    gap: 10px;
    min-height: 68vh;
    align-items: start;
  }
  
  .cards &gt; div:nth-child(1) {
    animation-delay: 0.1s;
  }
  
  .cards &gt; div:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .cards &gt; div:nth-child(3) {
    animation-delay: 0.3s;
  }
  
  .cards &gt; div:nth-child(4) {
    animation-delay: 0.4s;
  }
  
  .cards &gt; div:nth-child(5) {
    animation-delay: 0.5s;
  }
  
  .cards &gt; div:nth-child(6) {
    animation-delay: 0.6s;
  }
  
  .cards &gt; div:nth-child(7) {
    animation-delay: 0.7s;
  }
  
  .cards &gt; div:nth-child(8) {
    animation-delay: 0.8s;
  }
  
  .cards &gt; div:nth-child(9) {
    animation-delay: 0.9s;
  }
  
  .cards &gt; div:nth-child(10) {
    animation-delay: 1s;
  }
  
  .card {
    opacity: 0;
    animation: poof 0.5s forwards;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3);
  }
  .card:hover img {
    transform: scale(1.04);
  }
  .card img {
    cursor: pointer;
    display: block;
    width: 100%;
    transition: all 0.3s ease;
  }
  .show-expand {
    z-index: 100000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
  }
  .show-expand::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .show-expand::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
  }
  .show-expand::-webkit-scrollbar-thumb {
    background-color: #42275a;
  }
  
  .show-content {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 400px;
    animation: poof 0.5s;
    overflow: hidden;
    margin: 12px auto;
    width: 100%;
    max-width: 800px;
    color: #fff;
    background: linear-gradient(to left, #3ca55c, #56ab2f);
    border-radius: 0.8em;
    box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px;
  }
  @media (max-width: 600px) {
    .show-content {
      flex-direction: column;
    }
  }
  
  .show-poster {
    position: relative;
    display: flex;
  }
  .show-poster-bg {
    position: absolute;
    overflow: hidden;
    top: -20%;
    bottom: -20%;
    left: -20%;
    width: 100%;
    height: 150%;
    transform: rotate(5deg);
  }
  @media (max-width: 600px) {
    .show-poster-bg {
      left: auto;
      top: -80%;
      width: 150%;
    }
  }
  .show-poster-bg img {
    filter: blur(6px);
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(1.4);
  }
  .show-poster-main {
    position: relative;
    left: 56px;
    align-self: center;
    overflow: hidden;
    width: 140px;
    background-color: gainsboro;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.6) 0 6px 12px -6px;
    z-index: 1;
  }
  @media (max-width: 600px) {
    .show-poster-main {
      left: auto;
      margin-top: 84px;
      margin-left: 24px;
    }
  }
  .show-poster-main img {
    width: 140px;
    vertical-align: middle;
  }
  
  .show-detail {
    flex: 1;
    padding: 72px;
  }
  @media (max-width: 600px) {
    .show-detail {
      padding: 24px;
    }
  }
  .show-detail h2 {
    font-size: 2em;
    margin: 0;
    margin-bottom: 12px;
  }
  .show-detail .show-tags {
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    color: #d7f1b8;
    list-style: none;
    margin-bottom: 12px;
  }
  .show-detail .show-tags li {
    display: inline-block;
    margin-right: 12px;
    font-size: 0.9em;
    line-height: 1.5;
  }
  .show-detail .show-plot {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .show-detail .show-credits p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  
  .show-close {
    z-index: 1;
    font-size: 24px;
    position: absolute;
    top: 14px;
    right: 14px;
    margin: auto;
    padding: 15px 20px;
    cursor: pointer;
  }
  @media (max-width: 600px) {
    .show-close {
      color: #fff;
    }
  }
  .show-close:hover {
    color: red;
  }
  
  .loader, .error {
    grid-column: 1/-1;
    text-align: center;
    font-size: 24px;
    animation: poof 0.5s;
    color: #a8e063;
  }
  
  .pagination {
    margin: 15px auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    outline: none;
  }
  
  .pagination &gt; .active &gt; a {
    background-color: #fff;
    border-color: #fff;
    color: #56ab2f;
  }
  
  .pagination &gt; li &gt; a {
    border: 1px solid #fff;
    padding: 5px 10px;
    outline: none;
    cursor: pointer;
  }
  
  .pagination &gt; .active &gt; a, .pagination &gt; .active &gt; span, .pagination &gt; .active &gt; a:hover, .pagination &gt; .active &gt; span:hover, .pagination &gt; .active &gt; a:focus, .pagination &gt; .active &gt; span:focus {
    background-color: #fff;
    border-color: #fff;
    outline: none;
  }
  
  .pagination &gt; li &gt; a, .pagination &gt; li &gt; span {
    color: #fff;
  }
  
  .pagination &gt; li:first-child &gt; a, .pagination &gt; li:first-child &gt; span, .pagination &gt; li:last-child &gt; a, .pagination &gt; li:last-child &gt; span {
    border-radius: unset;
  }
  
  /* Keyframes  */
  @keyframes poof {
    0% {
      opacity: 0;
      transform: translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  </code></pre>
  <p>In the following script <code>script.js</code>:</p>
  <pre><code>function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i &lt; arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}import axios, * as others from &quot;https://cdn.skypack.dev/axios@0.21.1&quot;;
  import ReactPaginate from &quot;https://cdn.skypack.dev/react-paginate@7.1.0&quot;;
  
  // https://www.omdbapi.com/?apikey=756abb2f&amp;i=tt4154664&amp;plot=full
  
  const { useState, useEffect } = React;
  
  // Main component -------------------------------
  const Main = props =&gt; {
  
    const getMovies = (term = 'war', page = 1) =&gt; {
      setLoading(true);
      axios.get(`https://www.omdbapi.com/?apikey=756abb2f&amp;s=${encodeURIComponent(term)}&amp;plot=full&amp;page=${page}`).
      then(response =&gt; {
        // console.log(response.data);
        setMovies(response.data.Search);
        setTotal(Math.ceil(response.data.totalResults / 10));
        setPages(page);
        setLoading(false);
      }).catch(error =&gt; {
        // console.log(error);
        setMovies([]);
        setLoading(false);
      });
    };
  
    const getMovie = movieId =&gt; {
      axios.get(`https://www.omdbapi.com/?apikey=756abb2f&amp;i=${movieId}&amp;plot=full`).
      then(response =&gt; {
        // console.log(response.data);
        setMovie(response.data);
        setShowPop(true);
      });
    };
  
    const [loading, setLoading] = useState(true);
    const [showPop, setShowPop] = useState(false);
    const [movies, setMovies] = useState([]);
    const [movie, setMovie] = useState({});
    const [keyword, setKeyword] = useState('frozen');
    const [pages, setPages] = useState(1);
    const [total, setTotal] = useState();
    useEffect(() =&gt; {
      getMovies();
    }, []);
  
    const handlePageClick = e =&gt; {
      console.log(e.selected);
      getMovies(keyword, e.selected + 1);
    };
  
    const handleCardClicked = movieId =&gt; {
      // console.log(movieId);
      getMovie(movieId);
  
    };
  
    const genCards = () =&gt; {
      let allCards = [];
      if (movies) {
        movies.map(movie =&gt; {
          allCards.push( /*#__PURE__*/React.createElement(Card, _extends({}, movie, { cardClicked: handleCardClicked })));
        });
      }
      return allCards;
    };
  
    let allCards = genCards();
  
    return /*#__PURE__*/(
      React.createElement(&quot;div&quot;, { className: &quot;main&quot; }, /*#__PURE__*/
      React.createElement(&quot;h1&quot;, { className: &quot;head&quot; }, &quot;جستجوگر فیلم و سریال&quot;), /*#__PURE__*/
      React.createElement(Search, {
        getInputValue: val =&gt; setKeyword(val),
        sendEnter: () =&gt; getMovies(keyword),
        getSubmit: () =&gt; getMovies(keyword) }),
  
      showPop ? /*#__PURE__*/React.createElement(Showexpand, _extends({}, movie, { closePop: () =&gt; setShowPop(false) })) : null, /*#__PURE__*/
  
      React.createElement(&quot;div&quot;, { className: &quot;cards&quot; },
      loading ? /*#__PURE__*/React.createElement(Loader, null) :
      allCards.length === 0 ? /*#__PURE__*/
      React.createElement(&quot;div&quot;, { className: &quot;error&quot; }, &quot;No movie found...&quot;, /*#__PURE__*/
  
      React.createElement(&quot;i&quot;, { class: &quot;far fa-grin-beam-sweat&quot; })) :
      allCards), /*#__PURE__*/
  
  
      React.createElement(&quot;div&quot;, { className: &quot;paginate&quot; }, /*#__PURE__*/
      React.createElement(ReactPaginate, {
        previousLabel: &quot;Back&quot;,
        nextLabel: &quot;Next&quot;,
        breakLabel: &quot;...&quot;,
        breakClassName: &quot;break-me&quot;,
        pageCount: total,
        marginPagesDisplayed: 1,
        pageRangeDisplayed: 4,
        onPageChange: handlePageClick,
        containerClassName: &quot;pagination&quot;,
        subContainerClassName: &quot;pages pagination&quot;,
        activeClassName: &quot;active&quot; }))));
  
  
  
  
  
  
  };
  
  
  
  // Loader component -------------------------------
  const Loader = props =&gt; {
  
    return /*#__PURE__*/(
      React.createElement(&quot;div&quot;, { className: &quot;loader&quot; }, &quot;Loading...&quot;, /*#__PURE__*/
  
      React.createElement(&quot;i&quot;, { class: &quot;fas fa-sync-alt fa-spin&quot; })));
  
  
  };
  
  
  // Search component -------------------------
  const Search = props =&gt; {
  
    let sendValue = e =&gt; {
      props.getInputValue(e.target.value);
    };
  
    const handleSubmit = () =&gt; {
      props.getSubmit();
    };
  
    const handleKeyDown = e =&gt; {
      if (e.key === 'Enter') {
        props.sendEnter();
        // console.log('Enter');
      }
    };
  
    return /*#__PURE__*/(
      React.createElement(&quot;div&quot;, { className: &quot;search&quot; }, /*#__PURE__*/
      React.createElement(&quot;div&quot;, { className: &quot;search-box&quot; }, /*#__PURE__*/
      React.createElement(&quot;input&quot;, { type: &quot;text&quot;,
        onChange: sendValue,
        onKeyDown: handleKeyDown,
        placeholder: &quot;Find movie...&quot; }), /*#__PURE__*/
      React.createElement(&quot;button&quot;, { onClick: handleSubmit }, /*#__PURE__*/React.createElement(&quot;i&quot;, { class: &quot;fas fa-search&quot; })))));
  
  
  
  };
  
  
  // Card component ------------------------------------------------
  const Card = props =&gt; {
  
    // console.log(props);
    const handleClick = e =&gt; {
      // console.log(e.target.dataset.id);
      props.cardClicked(e.target.dataset.id);
    };
    return /*#__PURE__*/(
      React.createElement(&quot;div&quot;, { className: &quot;card&quot;, title: props.Title, &quot;data-id&quot;: props.imdbID, onClick: handleClick }, /*#__PURE__*/
      React.createElement(&quot;img&quot;, { src: props.Poster !== 'N/A' ? props.Poster : 'https://via.placeholder.com/163x240/111217/FFFFFF/?text=No%20Image', alt: props.Title, &quot;data-id&quot;: props.imdbID })));
  
  
  };
  
  
  
  // Show expand component ---------------------------------------
  const Showexpand = props =&gt; {
  
    console.log(props);
  
    return /*#__PURE__*/(
      React.createElement(&quot;div&quot;, { className: &quot;show-expand&quot; }, /*#__PURE__*/
  
      React.createElement(&quot;div&quot;, { className: &quot;show-content&quot; }, /*#__PURE__*/
      React.createElement(&quot;i&quot;, { class: &quot;show-close fas fa-times&quot;, onClick: props.closePop }), /*#__PURE__*/
  
      React.createElement(&quot;div&quot;, { className: &quot;show-poster&quot; }, /*#__PURE__*/
      React.createElement(&quot;span&quot;, { className: &quot;show-poster-bg&quot; }, /*#__PURE__*/
      React.createElement(&quot;img&quot;, { src: props.Poster !== 'N/A' ? props.Poster : 'https://via.placeholder.com/163x240/111217/FFFFFF/?text=No%20Image', alt: props.Title })), /*#__PURE__*/
  
      React.createElement(&quot;span&quot;, { className: &quot;show-poster-main&quot; }, /*#__PURE__*/
      React.createElement(&quot;img&quot;, { src: props.Poster !== 'N/A' ? props.Poster : 'https://via.placeholder.com/163x240/111217/FFFFFF/?text=No%20Image', alt: props.Title }))), /*#__PURE__*/
  
  
  
      React.createElement(&quot;div&quot;, { className: &quot;show-detail&quot; }, /*#__PURE__*/
      React.createElement(&quot;h2&quot;, null, props.Title), /*#__PURE__*/
      React.createElement(&quot;ul&quot;, { className: &quot;show-tags&quot; }, /*#__PURE__*/
      React.createElement(&quot;li&quot;, { className: &quot;show-rated&quot; }, props.Country), /*#__PURE__*/
      React.createElement(&quot;li&quot;, { className: &quot;show-rated&quot; }, props.Year), /*#__PURE__*/
      React.createElement(&quot;li&quot;, { className: &quot;show-year&quot; }, props.Rated), /*#__PURE__*/
      React.createElement(&quot;li&quot;, { className: &quot;show-year&quot; }, props.Genre)), /*#__PURE__*/
  
      React.createElement(&quot;div&quot;, { class: &quot;show-plot&quot; }, /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, props.Plot)), /*#__PURE__*/
  
  
      React.createElement(&quot;div&quot;, { class: &quot;show-credits&quot; }, /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;Production:&quot;), &quot; &quot;, props.Production), /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;Runtime:&quot;), &quot; &quot;, props.Runtime || 'N/A '), /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;Rating:&quot;), &quot; &quot;, props.imdbRating), /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;Director:&quot;), &quot; &quot;, props.Director), /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;Actors:&quot;), &quot; &quot;, props.Actors), /*#__PURE__*/
      React.createElement(&quot;p&quot;, null, /*#__PURE__*/React.createElement(&quot;strong&quot;, null, &quot;BoxOffice:&quot;), &quot; &quot;, props.BoxOffice || 'N/A '))))));
  
  
  
  
  
  
  };
  
  ReactDOM.render( /*#__PURE__*/React.createElement(Main, null), document.getElementById('app'));
  </code></pre>
  <p>I ran into a problem with this script that I can't figure out
  After clicking on all the videos, they will be opened as a pop-up and their information will be displayed.
  But I want the pages to open after clicking like this:</p>
  <p>site/index.php?id=tt12345</p>
  <p>Or</p>
  <p>site/tt12345</p>
  <p>But I don't have enough knowledge to do this, the script with all the details and codes is at your disposal above.</p>