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>

类隐藏应该有有效的css来隐藏div。在div中使用类modal-bg。

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

1 个答案: