Question

我正在尝试创建一个简单的登录和注册表单，您可以选择登录，如果您没有登录，则单击注册按钮。然后，我希望注册表单下拉，但是当我这样做时，它会从页面的一侧掉落，然后弹出到应该存在的中间位置。令人讨厌的是它在小提琴here

上工作得很好

import {Component} from '@angular/core';
import { BackandService } from '@backand/angular2-sdk'
import { LoginPage } from '../login/login';
import { AlertController } from 'ionic-angular';




@Component({
  templateUrl: 'signup.html',
  selector: 'page-signup',
 })

export class SignupPage {

  email:string = '';
  firstName:string = '';
  lastName:string = '';
  signUpPassword: string = '';
  confirmPassword: string = '';
  bloodType: Object = {};



  constructor(private backand: BackandService, private alertCtrl: 
 AlertController) {

  }


  public signUp(email) {

  if(this.email == '' || this.firstName == '' ||  this.lastName == '' ||  this.signUpPassword == '' ||  this.confirmPassword == ''){
  let alert = this.alertCtrl.create({
    title: 'Error ',
    subTitle: 'Must fill in all fields.',
    buttons:['Try Again']
  });
  alert.present();
}


  if(this.signUpPassword != this.confirmPassword){
    let alert = this.alertCtrl.create({
      title: 'Error ',
      subTitle: 'Passwords must match.',
      buttons:['Try Again']
    });
    alert.present();
    }

  if(this.signUpPassword.length < 6 && this.confirmPassword.length < 6){
    let alert = this.alertCtrl.create({
      title: 'Error ',
      subTitle: 'Password must be 6 characters.',
      buttons:['Try Again']
    });
    alert.present();
  }

 var reg = /^([\w-\.]+@(?!lsu.edu)([\w-]+\.)+[\w-]{2,4})?$/
  if (reg.test(email.value) == false) {
    let alert = this.alertCtrl.create({
      title: 'Error ',
      subTitle: 'Invalid email.',
      buttons:['Try Again']
    });
    alert.present();
    return false;
 }


this.backand.signup(this.firstName, this.lastName, this.email, this.signUpPassword, this.confirmPassword, this.bloodType)
.then((res: any) =>
  {
  let alert = this.alertCtrl.create({
    subTitle: 'Thank you for signing up.',
    buttons:['Login']
  });
  alert.present();
    this.email = this.signUpPassword = this.confirmPassword = this.firstName = this.lastName = this.bloodType = '';
  }
);
  }
}

Answer 1

问题1：类名＆＃34;容器流体＆＃34;不是流体容器。

问题2：在类名下放置没有col-md-4 col-md-offset-4的signUp按钮.signIn liveOnFiddle

＆＃13;

$(document).ready(function(){
$(".signUp").hide();

$(".signUpBtn").click(function(){
				$(this).fadeOut("slow");
    	$(".signIn").slideToggle("slow",function(){
    		$(".signUp").slideToggle("slow");
    	});
    });
})

＆＃13;

  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<title>Drive Control</title>
	
<body>
	<div class="container-fluid">
		<div class="col-md-10 col-md-offset-1 text-center">
			<h1>Welcome To Drive Control</h1>
		</div>
	</div>
	<div class="container-fluid signIn">
		<div class="col-md-4 col-md-offset-4">
			<form id="log" method="post">
				<div class="form-group">
					<label class="form-horizontal">Email</label>
					<input class="form-control" type="text" name="email" placeholder="Email">
				</div>
				<div class="form-group">	
					<label class="form-horizontal">Password</label>
					<input class="form-control" type="password" name="pass" placeholder="Password">
				</div>	
					<button class="form-control btn btn-primary" type="submit">Sign In</button>
			</form>
			<div id="error">
				<p></p>
			</div>
		
	<button class="btn btn-danger btn-block signUpBtn">Sign Up</button> </div>
	</div>
	
	
	
	<div class="container-fluid signUp">
		<div class="col-md-4 col-md-offset-4">
			<form action="" method="post">
				<div class="form-group">
					<label class="form-horizontal">First Name</label> 
					<input class="form-control" type="text" name="fname" placeholder="Username">
				</div>
				<div class="form-group">
					<label class="form-horizontal">Last Name</label>
					<input class="form-control" type="text" name="lname" placeholder="Username">
				</div>
				<div class="form-group">
					<label class="form-horizontal">Email</label>
					<input class="form-control" type="text" name="email" placeholder="Email Address">
				</div>
				<div class="form-group">	
					<label class="form-horizontal">Password</label>
					<input class="form-control" type="password" name="pass" placeholder="Password">
				</div>	
					<button class="form-control btn btn-primary" type="submit">Submit</button>
			</form>
		</div>
	</div>

</body>

＆＃13;

JQuery slideToggle在页面的错误部分向下滑动，然后跳回

1 个答案: