Fatal编程技术网
  • php/
  • Php 引导弹出式登录页面不工作？

Php 引导弹出式登录页面不工作？

php twitter-bootstrap codeigniter

Php 引导弹出式登录页面不工作？,php,twitter-bootstrap,codeigniter,Php,Twitter Bootstrap,Codeigniter,我是php框架和引导程序的新手，在CodeIgnitor 3.0上工作。 我有一个简单的注册和登录导航栏，点击登录重定向到另一个页面，其中有另一个登录按钮，点击该按钮将打开弹出窗口 登录表单，但它不工作 //我的导航栏 <!DOCTYPE HTML> <html lang="en"> <head> <meta name="robots" content="NOODP"/> <meta http-equi

我是php框架和引导程序的新手，在CodeIgnitor 3.0上工作。 我有一个简单的注册和登录导航栏，点击登录重定向到另一个页面，其中有另一个登录按钮，点击该按钮将打开弹出窗口 登录表单，但它不工作

//我的导航栏

<!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>
//视图文件夹中的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>
如果我想在主页上弹出登录页面，我该怎么办

您有几个问题需要纠正。要使模态工作，您需要删除模态上的隐藏类

应该是

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

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

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
此外，超链接应该有数据目标而不是href。所以

应该是

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

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

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
这些更改应该会使模式运行，但您还需要进行其他更正

在这两个文件中，您都在加载bootstap、jquery，然后再次加载bootstrap。您只需要加载引导一次，它应该在jQuery之后，所以

应该是

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

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

<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>
确保jquery和boostrap min正在加载。对上述标记的处理似乎很好——试着将答案末尾给出的完整HTML复制到一个HTML文件中，我只是稍微更新了一下，看看它是否有效。还要确保你的js和css文件正在下载，也就是说，它没有被阻止，并且你没有禁用javascript。干杯！出了什么问题？我的意思是，除了上面的更改，我已经禁用了javascript和chrome，但现在mozilla是我的最爱…只要把你的模式代码移到主页上，并更改为daa目标代码。