为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕妹3146593 2021-04-02 10:07:50
我正在为我的作业建立网页。我想要模式注册表单,但是当我单击“ 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>CSS#modal_content{    width: 40%;    height: auto;    margin-top: 3%;    display: none;    z-index: 1;    overflow: auto;}我希望模式寄存器窗体不会自动关闭。
查看完整描述

2 回答

?
POPMUISE

TA贡献1765条经验 获得超5个赞

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

试试这个:

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


查看完整回答
反对 回复 2021-04-15
  • 2 回答
  • 0 关注
  • 261 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号