html CSS jQuery模式在浏览器中无法打开

Question

我正在尝试单击按钮以注册用户时创建一个模式窗口。我不知道这是怎么回事。单击该按钮，但模式窗口未打开。我的代码是这样的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="button">
  <button type="button" onclick="document.getElementById(mymodal).style.display='block';">Create</button>


  <div id="mymodal" class="ourmodal">
    <div class="modal-content">

    </div>
  </div>
</div>
<style>
.ourmodal{
  display:none;
  position:fixed;
  overflow:auto;
  z-index:1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:grey;
}
.modal-content{
  background-color:honeydew;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>
    

请帮助

Answer 1

您忘记添加单引号：

<button type="button" onclick="document.getElementById('mymodal').style.display='block'">....

Answer 2

如果已插入，则可以使用jquery。

您可以简单地给按钮提供一个ID，然后使用下面的代码：

 <div class="button">
      <button type="button" id="open-modal" ">Create</button>


      <div id="mymodal" class="ourmodal">
        <div class="modal-content">

            <button id="close-modal">close</button>
        </div>
      </div>
    </div>

并在jquery之后编写脚本：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        jQuery('#open-modal').on('click',function(){
            jQuery('#mymodal').show();
        });
        jQuery('#close-modal').on('click',function(){
            jQuery('#mymodal').hide();
        });
      </script>