Bootstrap modal window in Laravel app not showing - php

Question

I'm writing a Laravel app and trying to implement a modal showing some details on an element. When I'm clicking on the link the backdrop is showing but not the modal window. In the network monitor of chrome it is showing the modal window in preview.
What's wrong?
Thank you in advance for your help!
Here is my code
index.blade.php
<td>
Details
</td>
modal.blade.php
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#yield('title')</h5>
</div>
<div class="modal-body">
#yield('content')
</div>
<div class="modal-footer">
#yield('footer')
</div>
</div>
</div>
show.blade.php
#extends('layouts.modal')
#section('title')
Demo Modal
#endsection
#section('content')
<p>test</p>
#endsection
#section('footer')
<button type="button" data-dismiss="modal">Close</button>
#endsection
remote.js
$(document).on('ajax:success', function(e, xhr){
if(!$('#modal').length){
$('body').append($('<div class="modal" id="modal"></div>'))
}
$('#modal').html(xhr.responseText).modal('show');
});
ProjectController.php
public function show($id)
{
$project = Project::findOrFail($id);
return view('projects.show', compact('project'));
}

Answer 1

Hey never use HTML Element in making a clickable modals that has value on it.
I suggest you used add value on it , That can be "ID" then add modal attributes on it, Then boom everything is fine and working.

Answer 2

You need to specify the html id tag in your link.
I suggest you try this
<a data-toggle="modal" id="smallButton" data-target="#smallModal"
data-attr="{{ route('projects.show', $project->id) }}" title="show">
<i class="fas fa-eye text-success fa-lg"></i>
</a>
<!-- small modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="smallBody">
<div>
<!-- the result to be displayed apply here -->
</div>
</div>
</div>
</div>
</div>
<script>
// display a modal (small modal)
$(document).on('click', '#smallButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
$('#smallModal').modal("show");
$('#smallBody').html(result).show();
},
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
})
});
</script>

Answer 3

In your Remote.js file :
$(document).on('ajax:success', function(e, xhr){
if(!$('#modal').length){
$('body').append($('<div class="modal" id="modal"></div>'))
}
$('#modal').modal('show');
$('#modal').html(xhr.responseText);
});