如何修复在点击按钮打开后立即关闭的模式弹出窗口

时间：2019-04-02 11:35:32

标签： javascript html

我正在为作业构建网页。我想使用模式注册表格，但是当我单击“ SIGNUP”将其弹出时，它立即关闭。为什么会这样呢？如何解决？我不想让我的模态自动关闭。当我单击另一个区域或单击“ x”关闭时，我想关闭它。

我是Web开发的初学者。我不将Bootstrap用于模态。

HTML 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="home.css">
    <title>Online Stock Trading</title>
</head>
<body>

    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">STOCK</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Market Data</a>
          <a class="nav-item nav-link" href="#">Trade</a>
        </div>
      </div>
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Username">
        <input class="form-control mr-sm-2" type="search" placeholder="Password">
        <button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
        <button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
      </form>
    </nav>

我的模态代码

    <!-- register form-->
    <div class="container" id="modal_content">
        <div class="card text-center">
            <div class="card-header bg-dark text-white">
                <button type="button" class="close" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                Register
            </div>
            <div class="card-body">
                <form class="register-box">
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Email</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" placeholder="test@example.com">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Password</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Confirm Password</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" placeholder="Confirm Password">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Name</label>
                        <div class="col-sm-6">
                        <input type="text" class="form-control" placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Last Name</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" placeholder="Last Name">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Phone</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" placeholder="081-234-XXXX">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form label">Address</label>
                        <div class="col-sm-6">
                            <textarea class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <button class="btn btn-success">SUBMIT</button>
                </form>
            </div>
        </div>
    </div>

有一个javascript文件

    <!-- script -->
    <script type="text/javascript" src="home.js"></script>
</body>
</html>

JAVASCRIPT 

var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementsByClassName("close");


btn.onclick = function(){
        modal.style.display = "block";
}
close.onclick = function(){
        modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

CSS 

#modal_content{
    width: 40%;
    height: auto;
    margin-top: 3%;
    display: none;
    z-index: 1;
    overflow: auto;
}

我希望模式寄存器形式不会自动关闭。

2 个答案:

答案 0 :(得分：2)

在按钮preventDefault()功能内使用onclick-

btn.onclick = function(e){
        e.preventDefault();
        modal.style.display = "block";
}


var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementById("close");


btn.onclick = function(e){
        e.preventDefault();
        modal.style.display = "block";
}
close.onclick = function(){
        modal.style.display = "none";
}
window.onclick = function() {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
#modal_content {
    display: none;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Online Stock Trading</title>
</head>
<body>

    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">STOCK</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Market Data</a>
          <a class="nav-item nav-link" href="#">Trade</a>
        </div>
      </div>
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Username">
        <input class="form-control mr-sm-2" type="search" placeholder="Password">
        <button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
        <button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
      </form>
    </nav>

    <!-- register form-->
    <div class="container" id="modal_content">
        <div class="card text-center">
            <div class="card-header bg-dark text-white">
                <button type="button" id="close" class="close" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                Register
            </div>
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
</body>
</html>

答案 1 :(得分：1)

您在<form>中有一个按钮。因此，您的按钮设置为键入“提交”。

尝试一下：

<button type="button" class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>

相关问题
最新问题