2016-05-30 11 views
0

私はLaravelアプリケーションを持っています。モーダルフォームを使うことができません。私は完全にコードをベースにしていますthis Bootsnipp exampleLaravelのモーダルボックスが表示されない

テストするために、私はtest.blade.phpというビューをロードするtestルートを定義しました。ブレードコードは以下の通りです:

@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 

私はその例からCSSファイルを追加しています。私はlayout.blade.phpファイルを持っています。

<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ファイルを表示します。しかし、モーダルボックスは表示されません。

+0

あなたは 'jquery.js'と' bootstrap.js'が含まれました:bootstrap.jsはとても順序が最初の場所でjqueryあるべきjqueryに依存しているのですか? – Rifki

+0

はい。私はそれらをどのように含めて質問を更新しました。私はちょうどブートストラップとjQueryの最小化バージョンを追加しました。 – wiwa1978

答えて

2

あなたのことを見てlayout.blade.phpあなたは間違った順序でスクリプトを配置したと思います。

<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> 
+0

これは実際に動作します。ブリリアント。それについて考えることはありませんでしたが、それは明らかです! – wiwa1978

関連する問題