WP自定义前端登录弹出框
Published
2023-01-25
浏览次数 : 153
<!DOCTYPE html>
<html>
<head>
<title>Login Form in Modal Window</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
jQuery(document).ready(function($) {
// Initialize the jQuery UI Dialog widget
$("#loginform").dialog({
autoOpen: false,
modal: true,
buttons: {
"Log In": function() {
$(this).submit();
}
}
});
// Open the login form when the login link is clicked
$("#login-link").click(function() {
$("#loginform").dialog("open");
return false;
});
});
</script>
</head>
<body>
<a href="#" id="login-link">Login</a>
<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
<p class="login-username">
<label for="user_login">Username or Email Address</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" autocomplete="username" />
</p>
<p class="login-password">
<label for="user_pass">Password</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" autocomplete="current-password" />
</p>
<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" />
<input type="hidden" name="redirect_to" value="<?php echo esc_url( home_url() ); ?>" />
</p>
</form>
</body>
</html>
- 标签1
- 标签1
- 标签1