僅在單擊按鈕時如何執行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>

隱藏類應該具有有效的CSS來隱藏div。 在div中，使用modal-bg類。