Bootsrap - モーダル内のポップオーバー内のフォーム

Question

私はこの機能を自分のログインモーダルに追加しようとしていましたが、正しく動作させることができません。私はそれの周りに私の頭を包むことができないので、私はこれについていくつかの助けを愛するだろう。

私は、ポップオーバーのタイトルの "x"ボタンをポップオーバーにしたいと思います。フォームはモーダルが閉じられているときにのみ機能します。私は本当にモーダルが開いているときにこれを働かせたい。これは私が作業しているコードです。

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h3 class="modal-title" id="loginModalLabel">Login</h3> 
     </div> 
     <div class="modal-body-login"> 
      <form> 
       <div class="form-group"> 
        <label for="usernameInput">Username</label> 
        <input type="username" class="form-control" id="usernameInput" placeholder="Username"> 
       </div> 
       <div class="form-group"> 
        <label for="passwordInput">Password</label> 
        <input type="password" class="form-control" id="passwordInput" placeholder="Password"> 
       </div> 
       <div class="checkbox"> 
       <label> 
        <input type="checkbox"> Remember me 
       </label> 
       <label> 

       <p class="forgot-password"><a href="#" id="passwordReset" data-html="true" data-container="body" data-toggle="popover" title="Password Reset <button type='button' class='close' id='close-popover' data-toggle='popover' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" data-placement="right" data-content=" 
       <p>Please Enter the Email Adress linked to your account, well send you a password reset right away!</p> 
       <form> 
        <div class='form-group'> 
         <input type='newEmail' class='form-control' placeholder='Email Adress'> 
        </div> 
        <button type='submit' class='btn btn-success btn-block'>Reset!</button> 
       </form> 
       ">Forgot Password?</a></p> 

       </label> 
       </div> 
       <button type="submit" class="btn btn-success btn-block">Login</button> 
      </form> 
     </div> 

     <div class="modal-footer"> 
      <h4>- OR -</h4> 
      <a href="#collapseSignUp" data-toggle="collapse" aria-expanded="false" aria-controls="collapseSignUp"><h1>Sign Up</h1></a> 
      <div class="collapse" id="collapseSignUp"> 
       <div class="well"> 
        <form> 
         <div class="form-group"> 
          <input type="newUser" class="form-control" placeholder="New Username"> 
         </div> 
         <div class="form-group"> 
          <input type="newName" class="form-control" placeholder="First & Last Name"> 
         </div> 
         <div class="form-group"> 
          <input type="newEmail" class="form-control" placeholder="Email Adress"> 
         </div> 
         <div class="form-group"> 
          <input type="newPassword" class="form-control" placeholder="New Password"> 
         </div> 
         <div class="checkbox sub-check"> 
          <label> 
           <input type="checkbox"> Sign Up for our newsletter? <p class="sub">No spam + Tonnes of free stuff.</p> 
          </label> 
         </div> 
         <button type="submit" class="btn btn-info btn-block">Sign Up</button> 
        </form> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

このありえないが正しく作動した理由がある場合は、私が知っているのが大好きです。どうもありがとうございます！

Answer 1

あなたの質問は私が理解したことに基づいて、クローズボタンでHTMLコンテンツをポップオーバーすることができます。

$(document).ready(function(){ 
 
\t $('#loginModal').modal('show'); 
 
\t $("#passwordReset").popover({ 
 
\t \t container: '#loginModal', 
 
    html: true, 
 
\t template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"><button class="closePopover"><span aria-hidden=""true">&times;</span></button></h3><div class="popover-content"></div></div>', 
 
\t \t title: '<span class="text-info"><strong>Password Reset</strong></span>'+ 
 
       '<button type="button" id="close" class="close" onclick="$(&quot;#passwordReset&quot;).popover(&quot;hide&quot;);">&times;</button>', 
 
\t content: function() { 
 
      return $('#popover-content').html(); 
 
     } 
 
}); 
 
});

.popover-title .close{ 
 
\t margin-top: -3px; 
 
\t position: absolute; 
 
\t right: 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> \t 
 
</head> 
 
<body> 
 
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"> 
 
<div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
      <h3 class="modal-title" id="loginModalLabel">Login</h3> 
 
     </div> 
 
     <div class="modal-body-login"> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="usernameInput">Username</label> 
 
        <input type="username" class="form-control" id="usernameInput" placeholder="Username"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="passwordInput">Password</label> 
 
        <input type="password" class="form-control" id="passwordInput" placeholder="Password"> 
 
       </div> 
 
       <div class="checkbox"> 
 
       <label> 
 
        <input type="checkbox"> Remember me 
 
       </label> 
 
       <label> 
 

 
       <p class="forgot-password"> 
 
\t \t \t \t \t <a href="#" id="passwordReset">Forgot Password?</a></p> 
 

 
       </label> 
 
       </div> 
 
       <button type="submit" class="btn btn-success btn-block">Login</button> 
 
      </form> 
 
     </div> 
 

 
     <div class="modal-footer"> 
 
      <h4>- OR -</h4> 
 
      <a href="#collapseSignUp" data-toggle="collapse" aria-expanded="false" aria-controls="collapseSignUp"><h1>Sign Up</h1></a> 
 
      <div class="collapse" id="collapseSignUp"> 
 
       <div class="well"> 
 
        <form> 
 
         <div class="form-group"> 
 
          <input type="newUser" class="form-control" placeholder="New Username"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <input type="newName" class="form-control" placeholder="First & Last Name"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <input type="newEmail" class="form-control" placeholder="Email Adress"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <input type="newPassword" class="form-control" placeholder="New Password"> 
 
         </div> 
 
         <div class="checkbox sub-check"> 
 
          <label> 
 
           <input type="checkbox"> Sign Up for our newsletter? <p class="sub">No spam + Tonnes of free stuff.</p> 
 
          </label> 
 
         </div> 
 
         <button type="submit" class="btn btn-info btn-block">Sign Up</button> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
\t </div> 
 
\t <div id="popover-content" class="hide"> 
 
       <p>Please Enter the Email Adress linked to your account, well send you a password reset right away!</p> 
 
       <form> 
 
        <div class='form-group'> 
 
         <input type='email' name="newEmail" class='form-control' placeholder='Email Adress'> 
 
        </div> 
 
        <button type='submit' class='btn btn-success btn-block'>Reset!</button> 
 
       </form> \t \t 
 
\t </div> \t 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
</body> 
 
</html>

ご不明な点がございましたら、コメントしてください。