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

如何根据单击哪个按钮在页面上显示模式

如何根据单击哪个按钮在页面上显示模式

幕布斯6054654 2023-05-11 09:49:51
为稍长的代码道歉。我试图在页面上打开模式,但没有任何反应,我的想法已经用完了。基本上,如果用户选择“访问课程”按钮,则带有 divid01的模式应该以其形式出现。如果点击“重置访问代码”按钮,它将只显示与 相关的模态id02。我不确定我在这里做错了什么。我知道在注释掉的代码中,如果我取消注释并删除modalFuntion(),那么如果我点击“重置访问代码”按钮,什么也不会发生,如果我点击“访问课程”按钮,两种模式都会出现。代码:   <body>                    <div style="text-align: center; margin-top: 2em;">                <img src="static/images/logo.png">        <h2>INTRODUCTION TO SOFTWARE TESTING ONLINE COURSE</h2>                <!--<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Access Course</button>-->        <!--<br/><br/>-->        <!--<button class="buttonLink" onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Forget Access Code</button>-->                <button onclick="modalFunction()" style="width:auto;">Access Course</button>        <br/><br/>        <button class="buttonLink" onclick="modalFunction()" style="width:auto;">Forget Access Code</button>                    </div>        <div id="id01" class="modal">                    <form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">            <div class="imgcontainer">              <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>            </div>                    <div class="container">              <label for="username"><b>Email</b></label>              <input type="text" placeholder="Enter Email" name="username" required>              <span class="help-block"><?php echo $username_err; ?></span>                <br/><br/>              <label for="password"><b>Access Code</b></label>              <input type="text" placeholder="Enter Access Code" name="password" required>                            <span class="help-block"><?php echo $password_err; ?></span>                              <button type="submit" value="Login" name="Login">Enter</button>          </form>        </div>
查看完整描述

1 回答

?
三国纷争

TA贡献1804条经验 获得超7个赞

两个模态内容的结束标签都被反转了。


他们都先关闭 theform然后关闭div,但它应该是相反的,而且还有一个</div>缺失(我改进了标识以帮助更好地可视化问题):


<div id="id01" class="modal">

    <form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">

        <div class="imgcontainer">

            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>

        </div>

    

        <div class="container">

            <label for="username"><b>Email</b></label>

            <input type="text" placeholder="Enter Email" name="username" required>

            <span class="help-block"><?php echo $username_err; ?></span>

            <br/><br/>

            <label for="password"><b>Access Code</b></label>

            <input type="text" placeholder="Enter Access Code" name="password" required>

            <span class="help-block"><?php echo $password_err; ?></span>    

            <button type="submit" value="Login" name="Login">Enter</button>

        </div>

    </form>

</div>

同样的事情也适用于id="id02"模态。


查看完整回答
反对 回复 2023-05-11
  • 1 回答
  • 0 关注
  • 80 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信