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>

Answer 3

@ ram-kc

请尝试以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="button">
  <button type="button" data-toggle="modal" data-target="#mymodal">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>

我希望以上代码对您有用。谢谢。

html css jquery modal无法在浏览器中打开

3 个答案: