Question

我有一个Laravel应用程序。我无法获得模态形式。我将代码完全基于this Bootsnipp example

为了测试，我已经定义了一个'test'路由，它加载视图'test.blade.php'。 Blade代码如下：

@extends('layout')

@section('content')

<a href="#" data-toggle="modal" data-target="#login-modal">Login</a>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
        <div class="loginmodal-container">
          <h1>Login to Your Account</h1><br>
          <form>
          <input type="text" name="user" placeholder="Username">
          <input type="password" name="pass" placeholder="Password">
          <input type="submit" name="login" class="login loginmodal-submit" value="Login">
          </form>

          <div class="login-help">
          <a href="#">Register</a> - <a href="#">Forgot Password</a>
          </div>
        </div>
      </div>
      </div>
@stop

我有一个layout.blade.php文件，我正在添加该示例中的css文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ asset('css/homepage.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="{{ asset('css/table.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="{{ asset('css/modal.css') }}" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我已将modal.css文件放在'public / css'文件夹中。当我查看页面源时，它会显示css文件，显示它正确加载。然而，模态框没有出现。

Answer 1

看到你的layout.blade.php我认为你的脚本排列错误了。 bootstrap.js取决于jquery，因此订单首先应为jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Laravel中的模态框没有出现

1 个答案: