如何仅在单击按钮时执行 html 代码

Question

我只想在单击按钮时运行此 html 代码：

<div class="modal-bg">
    <div id="modal">
        <span>Sign In<a href="#close" id="close">&#215;</a></span>
        <form>
            <input id="username" name="username" type="textbox" placeholder="Username" required>
            <input id="password" name="password" type="password" placeholder="Password" required>
            <a id="forgot-link" href="#">Forgot password?</a>
            <button name="submit" id="submit" type="submit">Sign in</button>
        </form>
    </div>
</div>

按钮的 html 代码是：

<span class="button" onclick="javascript:buttonClicked();">Sign In</span>

我想创建 buttonClicked() 函数以加载上面的 html 代码（表单等）。有什么想法吗？

Answer 1

    <button id="showdiv">Show</button>
    <div class="modal-bg hide">
    <div id="modal">
        <span>Sign In<a href="#close" id="close">&#215;</a></span>
        <form>
            <input id="username" name="username" type="textbox" placeholder="Username" required>
            <input id="password" name="password" type="password" placeholder="Password" required>
            <a id="forgot-link" href="#">Forgot password?</a>
            <button name="submit" id="submit" type="submit">Sign in</button>
        </form>
    </div>
</div>
<script>
    $(document).on("ready", function(e){
    $("#showdiv").on("click", function(){
    $("div.modal-bg").removeClass("hide");
    });
    });
</script>

Class 隐藏应该有有效的 css 来隐藏 div。在 div 中 class modal-bg.

如何仅在单击按钮时执行 html 代码

How to execute html code only when a button is clicked

html

javascript

onclick

button