Bootstrap彈出式登錄頁面無法正常工作？

Question

我是剛在CodeIgnitor 3.0上工作的PHP框架和引導程序的新手。 我有一個簡單的導航欄，用於注冊和登錄，單擊登錄重定向到另一個頁面，單擊另一個登錄按鈕，應打開彈出式登錄表單，但它不起作用？

//我的導航欄

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta name="robots" content="NOODP"/>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
         <script src="js/bootstrap.min.js"></script>
         <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>
    <style>

    body {
  padding-top: 0px;
}
@media (max-width: 1000px) {
  body {
    padding-top: 0px;
  }
}
</style>

    <body>
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" 
                         data-target=".navbar-collapse">
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                        </button>
      <a class="navbar-brand" href="#">LOGO</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
         <li class="active"><a href="#">SignUp</a></li>
         <li><a href="<?php echo site_url('LoginController/index') ?>">Login</a></li>
         </ul>
   </div>
</nav>
</div>

//在views文件夾中的login.php

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta name="robots" content="NOODP"/>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
         <script src="js/bootstrap.min.js"></script>
         <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>

<div class="container">
    <div class="row">
        <a class="btn btn-primary" data-toggle="modal" href="#myModal" >Login</a>

        <div class="modal hide" id="myModal">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">x</button>
            <h3>Login to MyWebsite.com</h3>
          </div>
          <div class="modal-body">
            <form method="post" action='' name="login_form">
              <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
              <p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
              <p><button type="submit" class="btn btn-primary">Sign in</button>
                <a href="#">Forgot Password?</a>
              </p>
            </form>
          </div>
          <div class="modal-footer">
            New To MyWebsite.com?
            <a href="#" class="btn btn-primary">Register</a>
          </div>
        </div>
    </div>
</div>

如果我希望該登錄頁面在主頁上彈出該怎么辦？？？

Answer 1

您有幾個問題需要糾正。 要使模式工作，您需要刪除模式上的hide類。

 <div class="modal hide" id="myModal">

應該

<div class="modal" id="myModal">

此外，超鏈接應具有數據目標（而非href）。 所以

 <a class="btn btn-primary" data-toggle="modal" href="#myModal">Login</a>

應該

<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>

這些更改應該使模態運行，但是您還需要執行其他更正

在這兩個文件中，您都將加載引導，jquery，然后再次引導。 您只需要加載一次引導程序，它應該在jQuery之后，所以

  <script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script>

應該

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>

這是應該工作的完整//login.php（為了完整性起見，我添加了body和title標簽，並關閉了html標簽）

我還用CDN版本替換了腳本和CSS，以解決本地js文件的任何問題。 一旦工作，就將它們交換回來。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <meta name="robots" content="NOODP"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>

            <div class="modal" id="myModal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h3>Login to MyWebsite.com</h3>
                </div>
                <div class="modal-body">
                    <form method="post" action='' name="login_form">
                        <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
                        <p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
                        <p>
                            <button type="submit" class="btn btn-primary">Sign in</button>
                            <a href="#">Forgot Password?</a>
                        </p>
                    </form>
                </div>
                <div class="modal-footer">
                    New To MyWebsite.com?
                    <a href="#" class="btn btn-primary">Register</a>
                </div>
            </div>
        </div>
    </div>
</body>

Bootstrap彈出式登錄頁面無法正常工作？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-07-01 12:44:09

Bootstrap彈出式登錄頁面無法正常工作？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-07-01 12:44:09

解決方案1
0 已采納 2015-07-01 12:44:09