REact onclick新窗口弹出

如何解决REact onclick新窗口弹出

我正在尝试使用此代码在React中弹出一个窗口

参考代码

 Complete output (56 lines):
    ============================================================================
    Edit setup.cfg to change the build options

    BUILDING MATPLOTLIB
                matplotlib: yes [3.0.3]
                    python: yes [3.8.3 (default,Jul  2 2020,17:30:36) [MSC
                            v.1916 64 bit (AMD64)]]
                  platform: yes [win32]

    REQUIRED DEPENDENCIES AND EXTENSIONS
                     numpy: yes [version 1.18.5]
          install_requires: yes [handled by setuptools]
                    libagg: yes [pkg-config information for 'libagg' could not
                            be found. Using local copy.]
                  freetype: yes [Using unknown version found on system.]
                       png: yes [Using unknown version found on system.]
                     qhull: yes [pkg-config information for 'libqhull' could not
                            be found. Using local copy.]

    OPTIONAL SUBPACKAGES
               sample_data: yes [installing]
                  toolkits: yes [installing]
                     tests: no  [skipping due to configuration]
            toolkits_tests: no  [skipping due to configuration]

    OPTIONAL BACKEND EXTENSIONS
                       agg: yes [installing]
                     tkagg: yes [installing; run-time loading from Python Tcl /
                            Tk]
                    macosx: no  [Mac OS-X only]
                 windowing: yes [installing]

    OPTIONAL PACKAGE DATA
                      dlls: no  [skipping due to configuration]

    running install
    running build
    running build_py
    copying lib\matplotlib\mpl-data\matplotlibrc -> build\lib.win-amd64-3.8\matplotlib\mpl-data
    UPDATING build\lib.win-amd64-3.8\matplotlib\_version.py
    set build\lib.win-amd64-3.8\matplotlib\_version.py to '3.0.3'
    running build_ext
    building 'matplotlib._png' extension
    creating build\temp.win-amd64-3.8
    creating build\temp.win-amd64-3.8\Release
    creating build\temp.win-amd64-3.8\Release\src
    C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\BIN\x86_amd64\cl.exe /c /nologo /Ox /W3 /GL /DNDEBUG /MD -DPY_ARRAY_UNIQUE_SYMBOL=MPL_matplotlib__png_ARRAY_API -DNPY_NO_DEPRECATED_API=NPY_1_7_API_VERSION -D__STDC_FORMAT_MACROS=1 -IC:\Anaconda3\envs\rev_env\lib\site-packages\numpy\core\include -IC:\Anaconda3\envs\rev_env\Library\include -I. -IC:\Anaconda3\envs\rev_env\include -IC:\Anaconda3\envs\rev_env\include "-IC:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\INCLUDE" "-IC:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt" "-IC:\Program Files (x86)\Windows Kits\8.1\include\shared" "-IC:\Program Files (x86)\Windows Kits\8.1\include\um" "-IC:\Program Files (x86)\Windows Kits\8.1\include\winrt" /EHsc /Tpsrc/_png.cpp /Fobuild\temp.win-amd64-3.8\Release\src/_png.obj
    _png.cpp
    src/_png.cpp(336): warning C4244: 'argument': conversion from 'Py_ssize_t' to 'int',possible loss of data
    src/_png.cpp(318): warning C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation,use _CRT_SECURE_NO_WARNINGS. See online help for details.
    C:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt\stdio.h(1769): note: see declaration of 'sprintf'
    C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\BIN\x86_amd64\cl.exe /c /nologo /Ox /W3 /GL /DNDEBUG /MD -DPY_ARRAY_UNIQUE_SYMBOL=MPL_matplotlib__png_ARRAY_API -DNPY_NO_DEPRECATED_API=NPY_1_7_API_VERSION -D__STDC_FORMAT_MACROS=1 -IC:\Anaconda3\envs\rev_env\lib\site-packages\numpy\core\include -IC:\Anaconda3\envs\rev_env\Library\include -I. -IC:\Anaconda3\envs\rev_env\include -IC:\Anaconda3\envs\rev_env\include "-IC:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\INCLUDE" "-IC:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt" "-IC:\Program Files (x86)\Windows Kits\8.1\include\shared" "-IC:\Program Files (x86)\Windows Kits\8.1\include\um" "-IC:\Program Files (x86)\Windows Kits\8.1\include\winrt" /EHsc /Tpsrc/mplutils.cpp /Fobuild\temp.win-amd64-3.8\Release\src/mplutils.obj
    mplutils.cpp
    C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\BIN\x86_amd64\link.exe /nologo /INCREMENTAL:NO /LTCG /DLL /MANIFEST:EMBED,ID=2 /MANIFESTUAC:NO /LIBPATH:C:\Anaconda3\envs\rev_env\Library\lib /LIBPATH:C:\Anaconda3\envs\rev_env\libs /LIBPATH:C:\Anaconda3\envs\rev_env\PCbuild\amd64 "/LIBPATH:C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\LIB\amd64" "/LIBPATH:C:\Program Files (x86)\Windows Kits\10\lib\10.0.10240.0\ucrt\x64" "/LIBPATH:C:\Program Files (x86)\Windows Kits\8.1\lib\winv6.3\um\x64" png.lib z.lib /EXPORT:PyInit__png build\temp.win-amd64-3.8\Release\src/_png.obj build\temp.win-amd64-3.8\Release\src/mplutils.obj /OUT:build\lib.win-amd64-3.8\matplotlib\_png.cp38-win_amd64.pyd /IMPLIB:build\temp.win-amd64-3.8\Release\src\_png.cp38-win_amd64.lib
    LINK : fatal error LNK1181: cannot open input file 'png.lib'
    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\BIN\\x86_amd64\\link.exe' failed with exit status 1181

这是我现在使用的代码，这是新标签页中的打开链接，但是我想要在弹出窗口中打开。

解决方法

我建议这样做：

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PopUp Test!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body class="background">
    <div class="app">
      
      <div class="btn">
        <button class="js-btn">new user?</button>
      </div>

      <div class="modal">
       <div class="modal_content">
        <span class="close">&times;</span>
        <p>I'm A Pop Up!!!</p>
       </div>
      </div>

    </div>
</html>

CSS：

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
}

.background {
  background-image: linear-gradient(#0a70da,#159db3,#10b197);
}

.btn {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 45%;
  zoom: 1.5;
}

button {
  border-radius: 10px;
  background-color: grey;
  outline: none;
}

button:hover {
  background-color: orange;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.25);
}

.modal_content {
  background-color: white;
  position: absolute;
  top: 20%;
  left: 30%;
  width: 40%;
  padding: 20px;
  border-radius: 5px;
  border: 2px solid black;
}

.close {
  color: Black;
  float: right;
}

.close:hover {
  color: red;
  cursor: pointer;
}

const the_button = document.querySelector(".js-btn")
const modal = document.querySelector(".modal")
const closeBtn = document.querySelector(".close")

document.addEventListener("DOMContentLoaded",() => {
  the_button.addEventListener("click",handleClick)
})

function handleClick(event) {
  modal.style.display = "block";
  closeBtn.addEventListener("click",() => {
    modal.style.display = "none"
  })
}

REact onclick新窗口弹出

如何解决REact onclick新窗口弹出

解决方法

相关推荐