[英]How to execute html code only when a button is clicked
我只想在单击按钮时运行此html代码:
<div class="modal-bg">
<div id="modal">
<span>Sign In<a href="#close" id="close">×</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代码(窗体等)。 有任何想法吗?
<button id="showdiv">Show</button>
<div class="modal-bg hide">
<div id="modal">
<span>Sign In<a href="#close" id="close">×</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类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.