我已经成功地创建了一个在点击链接后显示的弹出窗口,方法是使用像这样的 JavaScript onclick 事件:
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Sign In</a>
但是,我现在正试图弄清楚如何在不需要存在链接的情况下让它工作。我希望它在提交 php 表单时工作。所以基本上当有人注册时,我希望在帐户成功注册后出现一个弹出窗口。
我想在提交表单时获取元素“light”。我怎么能这样做?
编辑:
我现在是如何尝试这样做的..
<form action="" method="POST">
<div class="field">
<label for="fullname">Full Name</label>
<input type="text" class="inputbar" name="fullname" value="<?php echo escape(Input::get('fullname')); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" class="inputbaremail" name="email" value="<?php echo escape(Input::get('email')); ?>" required>
</div>
<div class="field">
<label for="username">Username</label>
<input type="text" class="inputbar" name="username" value="<?php echo escape(Input::get('username')); ?>" autocomplete="off" required>
</div>
<div class="field">
<label for="password">Choose a password</label>
<input type="password" name="password" class="inputbarp" required>
</div>
<div class="field">
<label for="password_again">Confirm password</label>
<input type="password" name="password_again" class="inputbarp" required>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="signinButton">
<input id="signinButton" type="submit" value="Register">
</label><br>
<onsubmit = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div id="light" class="signInpopup"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<?php $success;?>
</div>
最佳答案
正如我在评论中所写,将表单发送到带有哈希的 URL,例如 #sent
。如果哈希存在,则显示 #light
和 #fade
。
<style>
div {display: none}
</style>
<form action="#sent" method=post>
...
<input type=submit>
</form>
<div id="light">light</div>
<div id="fade">fade</div>
<script>
if (location.hash && location.hash == '#sent') {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block'
}
</script>
关于javascript - 单击带有 getElementById 的表单提交后显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30858869/