This is very basic requirement to open second modal window by clicking on link on first modal window. When I search for it found difficult to get the answer which is very simple and no one talking about it. So I though of sharing a small code to demonstrate how you can open another modal window by closing first one.
Simple copy the below code and create an HTML file and access using browser. On Clicking of Button it will open login box and on clicking forgot password link it will open another modal window of forgot password by closing login window. SAMPLE HTML CODE:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalLogin">Open Modal</button>
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Forgot Password</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmai1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="loginForm">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-check">
<a href="#" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword" class="form-check-label">Forgot Password?</a>
<br><br>
</div>
<button type="button" (click)="login()" class="btn btn-primary">Login</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</body>
</html>
You need to add following attribute to the link or button where you want add this functionality:
data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"