Cannot call modal in another page

Question

I make button on index.php file and want call modal in another page, because when modal in same file and i refresh the page modal seen temporarily.

index.php

 <a href="modal.php" data-target="#cancel{{ $form->id }}" class='btn btn-danger btn-sm' data-toggle="modal">Cancel</button>

modal.php

@foreach($list_form as $form)
<div class="modal fade" id="cancel{{ $form->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header" style="background-color: red;">
            <h3 class="modal-title h3" id="exampleModalSmLabel" style="color: white;"><b>Cancel Description</b>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><h1><b>×</b></h1></span>
                </button>
            </h3>
          </div>
          <div class="modal-body">

            @if(auth()->user()->role == 'Admin') 
            <form action="{{ route('form001.cancel', $form->id) }}" method='post'> 
                @csrf
                <div class="form-group">
                    <label for="cancel_deskripsi">Alasan Cancel</label>
                    <textarea class="form-control" id="cancel_deskripsi" name="cancel_deskripsi" placeholder="tuliskan alasan anda..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type='submit' class='btn btn-danger btn-sm'>Submit</button>
                </div>
            </form>
            @endif
            {{ $form->cancel_deskripsi }}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>
</div>
@endforeach

Am I doing writing anything wrong?