<div class="modal fade" id="mymodal" data-mdb-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="my modal" aria-hidden="true">

<div class="modal-dialog modal-dialog-scrollable  modal-xl" role="document">

        <div class="modal-content">

          <div class="model-header">

            Headderrr

          </div>

          <div class='modal-body'>

            body

          </div>

          <div class="modal-footer">

                <button class="btn btn-secondary" id='cancelMyModalBtn' type="button"

                    data-mdb-dismiss="modal">Cancel</button>

    </div>

      </div>

​

  </div>

  </div>

<div class='d-flex mt-2 ms-1'>

<button type="button" class="btn btn-primary" onclick="loadModal();">

  open modal

</button>

<div class="btn-group ms-2 h-100">

  <div class='d-flex align-items-center ms-1 me-1'>choose method: </div>

  <input

    type="radio"

    class="btn-check"

    name="options"

    id="l1"

    autocomplete="off"

    checked

  />

  <label class="btn btn-secondary" for="l1">Method 1 (show bad behaviour)</label>

​

  <input type="radio" class="btn-check" name="options" id="l2" autocomplete="off" />

  <label class="btn btn-secondary" for="l2">Method 2 - old jquery .modal (correct behave)</label>

​

</div>

</div>

<div class='d-flex ms-1 mt-1 text-muted'>

  choose method (1) or (2) before you start, if already choosen method and want to change refresh the page and choose the method then start open/cancel the method, results will shown bellow:

</div>

<div class='border w-100  ms-1 mt-4 text-danger' style='background: hsl(240,40%,20%);' >

  Console Log:

<div class='border  ms-1 me-1 ' style='background: hsl(120,0%,70%);' id='consoleLog'>

</div>

</div>

<script

  src="https://code.jquery.com/jquery-3.6.0.min.js"

  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

  crossorigin="anonymous"></script>

​

.select-option:nth-child(1) > .select-option-text {

  color: #DE3C4B;

}

​

.select-option:nth-child(2) > .select-option-text {

  color: #1EFFBC;

}

​

.select-option:nth-child(1) {

  background-color: #E7C8DD;

}

​

.select-option:nth-child(2) {

  background-color: #357266;

}

​

.select-option.active:nth-child(1)  {

  background-color: #E28413;

}

​

.select-option:.active:nth-child(2)  {

  background-color: #E28413;

}

​

.select-option:nth-child(1):hover {

  background-color: #2DE1C2;

}

​

.select-option:nth-child(2):hover {

  background-color: #2DE1C2;

}

​

window.loadModal= function() {

  if ($('#l1').prop("checked") == true)

    window.loadModal1();

  else

    window.loadModal2();

}

​

window.loadModal1 = function() { 

    var myModal = new mdb.Modal(document.getElementById('mymodal'), {

         keyboard: false

    });

    myModal.show();

}

window.loadModal2 = function() { 

$('#mymodal').modal({

         show: true,

         keyboard: false

    });

}

​

$('#l1').on("change" , function() {

  if (window.counter > 0 )

    alert('reload the page to get correct behaviour..');

  $('#consoleLog').html('');

  window.counter = 0;

  //not working

  //window.location = "https://mdbootstrap.com/snippets/standard/sody/3279067#js-tab-view";

});

​

$('#l2').on("change" , function() {

  if (window.counter > 0 )

    alert('reload the page to get correct behaviour.., check the method and start');

  $('#consoleLog').html('');

  window.counter = 0;

  //not working

  //window.location = "https://mdbootstrap.com/snippets/standard/sody/3279067#js-tab-view?m2=1";

});

​

window.counter = 0;

​

window.loadEventListener = function() { 

  $('#mymodal').on('hidden.mdb.modal', function (e) {

    /* also changing this to this works: */

    /*

    $('#mymodal').on('hidden.bs.modal', function (e) {

    */

    console.log('yeaa');

    if (window.counter > 0)

      $('#consoleLog').append("<br>("+parseInt(window.counter+1)+") hidded");

    else

      $('#consoleLog').append("("+parseInt(window.counter+1)+")hidded");

    window.counter++;

  });

}

​

window.loadEventListener();

​