Adding modal dialog to the header file in MVC project does not work

See more:

C#

HTML

Ajax

MVC

partial-view

I implemented a modal popup as a part of the header.cshtml file in MVC project. the issue is that it does not show the dialog box (not working) The only way I was able to make work is when I put the both the button and the modal container in the header file. The modal body is a long text and it should not be a part of the header file.

Below is the code in the Roles.cshtml file where the modal container is created and the text is written

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
 }
 @{
ViewBag.Title = "Roles";
   }
 <div class="container">

<div class="styleguide-spacer-modals"></div>
 </div>
 <div class="modal" id="modal-active" aria-hidden="true">
 <div class="modal__overlay bg-modal" tabindex="-1"
     data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true"
         aria-labelledby="modal-title-1">
        <header class="modal__header">
            <h1 class="modal__title h2" id="modal-title-1">
                <h2>Roles</h2>
                <br />
            </h1>
        </header>
        <main class="modal__content">
        BLABLA......
        </main>

        <footer class="modal__footer">
            <button class="button button-primary"
                    aria-label="submit">
                close
            </button><button class="button button-secondary" data- 
              micromodal-close
               aria-label="closing">
                close
            </button>
        </footer>  
        </div>
     </div>
    </div>

Then the Header.cshtml file look like this: where I added "btnTrigger" and AJAX script to call and show the modal

@model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
    <div class="container portal-header-inner">
        <a href="#" title="Home" aria-label="Home" class="logo"></a>
        <button class="button button-tertiary button-menu-open js-menu- 
    open ml-auto" aria-haspopup="menu" title= mobil menu">Menu</button>
            <a href="#" class="button button-secondary" role="button">
             login
            </a>
        </div>
        <button class="button button-primary"  id="btnTrigger"
                data-micromodal-trigger="modal-passive">
          Read me
        </button>
         <div id="divContainer"></div>
    </div>
  </div>
  <div class="solution-header">

  blabla........         
   </div>
  </header>
  @section scripts
   {
   <script>
   $(function () {
    $('#btnTrigger').unbind();
    $('#btnTrigger').on('click', function () {
        $.ajax({
            url: '@Url.Action("Betingelser", "Rolles")', 
            type: 'POST',
            data: { },

            success: function (arr) {
                $('#divContainer').html(arr); //Load your HTML to 
           DivContainer
                $('#exampleModal').modal('show'); //Once loaded, show the 
          modal
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
});
 </script>
  }

Then in my Home controller I have the actionResult that should return the partial view

public ActionResult Roles()
        {
       return PartialView("Roles");
        }

I can't see why this is not working. Please help.

Pupop should appear when click on the button with id =btnTrigger

What I have tried:

I tried several tutorials, read modal documentation, and applied fixes from stackoverflow nothing worked for me. I must be missing something very simple and trivial I just can't see it.