Question

我试图让这个w3学校模式为我的网站工作但是当按下按钮时它根本不会弹出。我已经将css链接到了elswhere。

我收到了这段代码here。

      <div className="sec2">


      {/*///////////////////////////////////////////////////////*/}
        <div class="w3-container">
          <h2>W3.CSS Modal</h2>
          <button onclick={document.getElementById('id01').style.display='block'} class="w3-button w3-black">Open Modal</button>
          <div id="id01" class="w3-modal">
            <div class="w3-modal-content">
              <div class="w3-container">
                <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
                <p>Some text. Some text. Some text.</p>
                <p>Some text. Some text. Some text.</p>
              </div>
            </div>
          </div>
        </div>
        {/*///////////////////////////////////////////////////////*/}


      </div>

Answer 1

问题是onclick道具需要一个功能。

您应该通过将第一个按钮更改为：

来获得所需内容

<button onclick={() => { document.getElementById('id01').style.display='block'}} class="w3-button w3-black">Open Modal</button>

但是鉴于你在React工作，我建议考虑使用/设置状态而不是直接检索和操作DOM元素。

w3schools莫代尔不工作

1 个答案: