Bootstrap modal is dimmed ... why?

hi friends, if bootstrap modal is showing, it is dimmed (and without buttons and components availability). I don't know why ... pls help. There is my code - file "post.blade.php":

@extends('layouts.master_page')
@section('page_content')
...
          @foreach( $Post->comment  as $comment)
          <div class="card card-body shadow-sm mt-3">
            <div class="detail-area">
              <p class="user-comment mb-1">
                <div>
                {!! $comment->comment_body !!}
                </div>
              </p>
            </div>
            @if(Auth::check() && Auth::id()==$comment->user_id)
              <div>
                <a href="#EditComment{{ $comment->id }}" class="btn btn-primary" data-bs-toggle="modal"><i class="fa fa-check-square-o"></i> Edit</a>
                {{-- <button type="button" data-bs-toggle="modal" data-bs-target="#EditComment{{ $comment->id }}" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Edit</button> --}}
              </div>

<!-- Comment: edit modal dialog START -->
<div class="modal fade" id="EditComment{{ $comment->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit comment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
... some content of modal dialog ...
    </div>
  </div>
</div>
<!-- Comment: edit modal dialog END -->

            @endif
          </div>

          @endforeach
...
@endsection

file "master_page.blade.php":

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>

  @include('layouts.header')

  <main id="main">
    @yield('page_content')
  </main><!-- End #main -->

  @include('layouts.footer')
...
</body>
</html>

Moderators