title: Display another laravel blade view as a modal in a page
body: <p>Good day everyone,
  please, I am new to Laravel, I am creating a project management app, I created an index page for projects and I have a button where I can be able to create new projects, it is entirely another blade file, I need to display the blade as a modal, I tried using @include and bootstrap modal, but the index page is the one displaying in the modal popup instead of the create page, I don't know where I am getting it wrong, I need help because there is a lot of places I need to use the modal.</p>
  <p>This is my index page</p>
  <pre><code>@extends('layouts.app')
  
  @section('content')
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-12 margin-tb&quot;&gt;
  
          &lt;div class=&quot;pull-right&quot;&gt;
              &lt;a class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; href=&quot;{{ route('projects.create') }}&quot; data-target=&quot;#createModal&quot;&gt; New Project&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @if ($message = Session::get('success'))
  &lt;div class=&quot;alert alert-success&quot;&gt;
      &lt;p&gt;{{ $message }}&lt;/p&gt;
  &lt;/div&gt;
  @endif
  
  &lt;table class=&quot;table table-bordered table-hover&quot;&gt;
      &lt;thead class=&quot;text-primary&quot;&gt;
          &lt;tr&gt;
              &lt;th&gt;No&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Date Created&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      @foreach ($projects as $project)
      &lt;tbody class=&quot;table-striped&quot;&gt;
  
          &lt;tr&gt;
              &lt;td&gt;{{ ++$i }}&lt;/td&gt;
              &lt;td&gt;{{ $project-&gt;name }}&lt;/td&gt;
              &lt;td&gt;{{ $project-&gt;introduction }}&lt;/td&gt;
              &lt;td&gt;{{ $project-&gt;created_at-&gt;format('d/m/Y') }}&lt;/td&gt;
              &lt;td&gt;
                  &lt;form action=&quot;{{ route('projects.destroy',$project-&gt;id) }}&quot; method=&quot;POST&quot;&gt;
                      &lt;a class=&quot;fas fa-eye fa-lg text-warning mr-1&quot; href=&quot;{{ route('projects.show',$project-&gt;id) }}&quot;&gt;&lt;/a&gt;
                      &lt;a class=&quot;fas fa-edit fa-lg text-primary mr-1&quot; href=&quot; {{ route('projects.edit',$project-&gt;id) }}&quot;&gt;&lt;/a&gt;
  
                      @csrf
                      @method('DELETE')
  
                      &lt;button type=&quot;submit&quot; class=&quot;fa fa-trash fa-lg text-danger&quot; style=&quot;border: none; background-color:white;&quot;&gt;&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      @endforeach
  &lt;/table&gt;
  
  {!! $projects-&gt;links() !!}
  
  @endsection
  
  &lt;div class=&quot;modal fade&quot; id=&quot;createModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;createModal&quot; data-attr=&quot;{{ route('projects.create') }}&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  @include('projects.create')
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>while this is the create page</p>
  <pre><code>@extends('layouts.modal')
  
  @section('content')
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-12 margin-tb&quot;&gt;
          &lt;div class=&quot;pull-left&quot;&gt;
              &lt;h2&gt;New Project&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class=&quot;pull-right&quot;&gt;
              &lt;a class=&quot;btn btn-primary&quot; href=&quot;{{ route('projects.index') }}&quot;&gt; Back&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @if ($errors-&gt;any())
  &lt;div class=&quot;alert alert-danger&quot;&gt;
      &lt;strong&gt;Whoops!&lt;/strong&gt; There were some problems with your input.&lt;br&gt;&lt;br&gt;
      &lt;ul&gt;
          @foreach ($errors-&gt;all() as $error)
          &lt;li&gt;{{ $error }}&lt;/li&gt;
          @endforeach
      &lt;/ul&gt;
  &lt;/div&gt;
  @endif
  
  &lt;form action=&quot;{{ route('projects.store') }}&quot; method=&quot;POST&quot;&gt;
      @csrf
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-xs-12 col-sm-12 col-md-12&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;strong&gt;Name:&lt;/strong&gt;
                  &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; placeholder=&quot;Name&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-xs-12 col-sm-12 col-md-12&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;strong&gt;Introduction:&lt;/strong&gt;
                  &lt;textarea class=&quot;form-control&quot; style=&quot;height:50px&quot; name=&quot;introduction&quot; placeholder=&quot;Introduction&quot;&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-xs-12 col-sm-12 col-md-12&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;strong&gt;location:&lt;/strong&gt;
                  &lt;textarea class=&quot;form-control&quot; style=&quot;height:150px&quot; name=&quot;location&quot; placeholder=&quot;Location&quot;&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-xs-12 col-sm-12 col-md-12 text-center&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  @endsection
  </code></pre>
  <p>Thank you in advance</p>