0
부트 스트랩으로 모달을 만들고 있습니다. 저는 웹 엔지니어링을 처음 사용하고있어서 도움이 필요합니다. 내 모달에는 로그인 용과 가입 용의 두 개의 동적 탭이 있어야합니다. 하나의 작업에서 두 개의 개념을 사용하여 모달과 함께 동적 탭을 사용하려고했습니다.로그인 모드가 올바르게 작동하지 않습니다.
무엇이 잘못되었는지 알려주세요. 로그인 탭은 정상적으로 작동하지만 가입을 클릭하면 동적 탭 에서처럼 수정 한 div 및 위에 표시된 항목 아래에 가입 자격 증명을 덮어 쓰지 않고 표시합니다.
그것은 다음과 같습니다 Modal Image이
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#signin" data-toggle="tab">Sign In</a></li>
<li class=""><a href="#signup" data-toggle="tab">Register</a></li>
</ul>
</div>
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar" style="height:200px; width:200px; align:center; margin-left: 220px">
</div>
<div class="modal-body" style="padding:40px 50px;">
<div class="tab-pane fade active in" id="signin">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<!-- Login button-->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</div></div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
<!-- MODAL SIGN UP-->
<div class="tab-pane fade" id="signup">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
당신은 speci해야합니다. 섹션 사이를 전환하기위한 어떤 종류의 플래그. –