ファンクションで{bootstrap}ポップアップを使用するにはどうすればいいですか？

ブートストラップを使用するページにログイン用のログインフォームが表示されています。サインアップページ私は、ぼやけの形になっているフォームのログをポップアップするログインリンクを持っています。ここでファンクションで{bootstrap}ポップアップを使用するにはどうすればいいですか？

は私のコードです：

<link rel="stylesheet" type="text/css" href="css/style.css"> 
<link rel="stylesheet" type="text/css" href="css/menu.css"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<body> 
<div class="page-header"> 
<header> 
    <!--<div id="logo"> 
      <h5><a href="gallery.php" style="text-shadow: 2px 2px 5px #fff; font-size: 32px;margin-top: -10px;">K-Movies</a></h5> 
    </div>--> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>       
       </button> 
       <a class="navbar-brand" href="h.php" style="text-shadow: 2px 2px 5px #fff; font-size: 32px;">K-Movies</a> 
      </div> 

      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="about.php">About</a></li> 
        <li><a href="#">Categories</a></li> 
        <li><a href="#">Latest</a></li> 
        <li><a href="contact.php">Contact</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="register.php"><span class="glyphicon glyphicon-user" style="color:blue;"></span> Sign Up</a></li> 
        <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in" style="color:blue;"></span> Login</a> 

         <!-- Modal The pop {blur}--> 

         <div class="modal fade" id="myModal" role="dialog"> 
          <div class="modal-dialog"> 

           <!-- Modal content--> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             Log In Form 
            </div> 

            <div class="modal-body"> 
             <form method="POST" action="login.php" role="form" class="form-horizontal"> 
               <div class="form-group"> 
               <label class="control-label col-sm-2" for="email">Email:</label> 
               <input type="email" name="email" class="control-label col-sm-4"> 
              </div> 

              <div class="form-group"> 
               <label class="control-label col-sm-2" for="pw">Password:</label> 
               <input type="password" name="pw" class="control-label col-sm-4"> 
              </div> 

              <div class="form-group"> 
               <div class="col-sm-offset-2 col-sm-4"> 
                <button type="submit" name="login" class="btn btn-primary">Log In</button> <b>OR</b> <br><strong><a href="register.php">Sign Up</a></strong> 
               </div> 
              </div> 
             </form> 
            </div> 

            <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav>  
</header> 
</div>

そして、ここで休憩のために申し訳ありませんが、別のページにあるリンク

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-warning" name="submit" id="submit">Submit</button><b>OR</b> <strong><a href="" onclick="mylogin()">Log In</a></strong> 
    </div> 
</div>

出典

2016-07-17 DannieP

は、ここに新しいイムされて、まだ方法を知ってはいけませんこれを使用する – DannieP

あなたはこれに直面している問題は何ですか？ –

$(function() { 

var $formLogin = $('#login-form'); 
var $formLost = $('#lost-form'); 
var $formRegister = $('#register-form'); 
var $divForms = $('#div-forms'); 
var $modalAnimateTime = 300; 
var $msgAnimateTime = 150; 
var $msgShowTime = 2000; 

$("form").submit(function() { 
    switch(this.id) { 
     case "login-form": 
      var $lg_username=$('#login_username').val(); 
      var $lg_password=$('#login_password').val(); 
      if ($lg_username == "ERROR") { 
       msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error"); 
      } else { 
       msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK"); 
      } 
      return false; 
      break; 
     case "lost-form": 
      var $ls_email=$('#lost_email').val(); 
      if ($ls_email == "ERROR") { 
       msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error"); 
      } else { 
       msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK"); 
      } 
      return false; 
      break; 
     case "register-form": 
      var $rg_username=$('#register_username').val(); 
      var $rg_email=$('#register_email').val(); 
      var $rg_password=$('#register_password').val(); 
      if ($rg_username == "ERROR") { 
       msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error"); 
      } else { 
       msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK"); 
      } 
      return false; 
      break; 
     default: 
      return false; 
    } 
    return false; 
}); 

$('#login_register_btn').click(function() { modalAnimate($formLogin, $formRegister) }); 
$('#register_login_btn').click(function() { modalAnimate($formRegister, $formLogin); }); 
$('#login_lost_btn').click(function() { modalAnimate($formLogin, $formLost); }); 
$('#lost_login_btn').click(function() { modalAnimate($formLost, $formLogin); }); 
$('#lost_register_btn').click(function() { modalAnimate($formLost, $formRegister); }); 
$('#register_lost_btn').click(function() { modalAnimate($formRegister, $formLost); }); 

function modalAnimate ($oldForm, $newForm) { 
    var $oldH = $oldForm.height(); 
    var $newH = $newForm.height(); 
    $divForms.css("height",$oldH); 
    $oldForm.fadeToggle($modalAnimateTime, function(){ 
     $divForms.animate({height: $newH}, $modalAnimateTime, function(){ 
      $newForm.fadeToggle($modalAnimateTime); 
     }); 
    }); 
} 

function msgFade ($msgId, $msgText) { 
    $msgId.fadeOut($msgAnimateTime, function() { 
     $(this).text($msgText).fadeIn($msgAnimateTime); 
    }); 
} 

function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) { 
    var $msgOld = $divTag.text(); 
    msgFade($textTag, $msgText); 
    $divTag.addClass($divClass); 
    $iconTag.removeClass("glyphicon-chevron-right"); 
    $iconTag.addClass($iconClass + " " + $divClass); 
    setTimeout(function() { 
     msgFade($textTag, $msgOld); 
     $divTag.removeClass($divClass); 
     $iconTag.addClass("glyphicon-chevron-right"); 
     $iconTag.removeClass($iconClass + " " + $divClass); 
    }, $msgShowTime); 
} 
});

Check here.

出典

2016-07-17 16:59:53 Ranjan

どこにこのコードを挿入しますか？ register.phpまたはlogin.php – DannieP

実際にあなたの質問に応じて既にログインページが含まれているシンプルなモーダルポップアップで、アプリケーション内のページを使用したいので、jqueryファイルを含むモーダルフォームをコピーするだけです必要に応じてIDの名前を変更します。 – Ranjan

ファンクションで{bootstrap}ポップアップを使用するにはどうすればいいですか？

答えて

関連する問題