Laravel中的模态框没有出现

Question

我有一个 Laravel 应用程序。我无法让模态表单工作。我将代码完全基于this Bootsnipp example

为了进行测试，我定义了一个“测试”路由，它加载视图“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>