引导模态1直到模态2关闭才关闭

Question

• 我正在尝试从另一个模式弹出窗口中获取一个模式弹出窗口 窗口。当我从第一个弹出窗口中单击链接时，第二个 弹出窗口正在打开，但是第一个没有关闭。
• 我尝试过但无法正常工作。 数据目标无效，因为列表项主题JavaScript冲突。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
      function showpopup(id)
      {
      $("#textid").val(id);
      $("#myModal").modal('show');
      //alert();
      }
       
      function forgotpopup()
      {

      $("#myModal").modal('hide');
      $("#ForGot").modal('show');

      }
</script>
        
<article>
  <div id="main-wrapper" class="container">

      <a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>

  </div>
</article>
    
    <div class="container">
     
      <div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
    
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <center><h4 class="modal-title">Login</h4></center> 
            </div>
              <div class="modal-body" style="padding:30px 40px;">
        <form role="form" method="post">
                <div class="form-group">
                  <label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
                  <input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
                </div>
                <div class="form-group">
                  <label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
                  <input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
                </div>
                
                
                <div class="form-group pull-left" style="width:100%; border:0px solid ;">
               
                    <input type="checkbox" > 
                    <label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
                </div>
                
                <center>
                  <button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
                  <p><a href="#"  id="fBtn" onclick="forgotpopup();"> Forgot Password </a></p>
                  <p>Not a member? <a href="#" >Sign Up</a></p>
                 
                  </center>
                <input type="hidden" name="txtid" id="textid" value="">
    	
              </form>            
              </div>      
          </div>
          
        </div>
      </div>
      </div>
    
    <div class="modal fade" id="ForGot" role="dialog">
    		<div class="modal-dialog modal-lg">
    		  <div class="modal-content">
    			<div class="modal-header">
    			  <button type="button" class="close" data-dismiss="modal">&times;</button>
    			  <h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
    			</div>
    			<div class="modal-body">
    				<form role="form" method="post" id="reused_form">
    					<h6>Enter your email associated with your account to get link to reset the password.</h6>
    					<input type="text" required>
    					
    				</form>
    			</div>
    		  </div>
    		</div>
      	</div>
      
      
      
    </div>