заблокировать клик по ссылке до полной загрузки страницы

[ufaclub]

есть такой кусок кода (выкладываю его часть)

$(window).on('load', function() {

	
  $('.modal-catalog-item').on('show.bs.modal', function (e) {
	  
	  
    var $modal = $(this),
      $btn = $(e.relatedTarget);

    var id = $btn.data('catalog-item-id');

    $.ajax({
      url: '/inc/catalog/item.php',
      method: 'GET',
      data: {
        'id': id
      },
      success: function (response) {
		  
		 

		  
        $modal.find('.modal-body').html(response);
        $modal.find('.modal-title').html($(".origtitle").html());
		
		

	 $modal.find('.carousel').each(function () {
          new bootstrap.Carousel(this);
        });
		
		
		




	
  $('.modal-catalog-item').on('shown.bs.modal', function (e) {

    var $modal = $(this);

    $modal.find('.modal-catalog-item-slider-main').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      asNavFor: '.modal-catalog-item-slider-nav',
      lazyLoad: 'ondemand',
	  infinite: false,
      swipe: false
    });

	
  });
  
  
  	
		
      }
	  
	  
	  
    });
  });


});

по сути он на ссылку a.modal-catalog-item открывает модальное окно

передавая параметры на генерацию содержимого к примеру

data-catalog-item-id="26"



<a class="btn-modal-catalog-item" data-bs-toggle="modal" data-bs-target=".modal-catalog-item" data-catalog-item-id="26">

тут содержание блока

</a>


так вот если внутри блока достаточно много информации слайдер к примеру то это все грузится какое то время на слабом интернете пару секунд

и если в эти пару секунд нажать на ссылку то открывается модальное окно и ничего не погружается

скрипт подключен в конце сайта </body>

но вот если дождаться полной загрузки всех картинок чтобы страница полностью прогрузилась то все ок.

т.е как то надо заблокировать нажатие на ссылки в момент когда грузится страница

думал обернув

$(window).on('load', function() {}


я как раз и должен был получить что выполнение . т.е открытие модальных ссылок будет происходить после полной загрузки страницы

но как понял это не работает.

может есть какой то вариант еще сделать недоступными клик по ссылке

a class="btn-modal-catalog-item"

перекрывать слоем z-index а потом его снимать как то не хотелось бы

может из кода удалить data-bs-toggle="modal" и как то его назначить только в конце загрузки страницы.

т.е походу сейчас в момент пока еще скрипт не загружен событие data-bs-toggle="modal" вызывает открытие пустого окна без параметров генерации контента. (которые задаются в скрипте ниже)

помогите пожалуйста кто знает специфику модальных окон на bootstrap 5.2

[ufaclub]

т.е вот data-bs-toggle="modal" этот кусок бы только после загрузки в ссылку вставлять.

без него не открывается окно.

а так загрузилась страница полностью в ссылку


<a class="btn-modal-catalog-item" data-bs-target=".modal-catalog-item" data-catalog-item-id="26">

тут содержание блока

</a>

добавили data-bs-toggle="modal" и после уже по условиям кода

 $('.modal-catalog-item').on('show.bs.modal', function (e) {....}

происходила работа скрипта

[ufaclub]

пробовал поднять секцию скрипта в шапку сайта до выполнения кода
ситуация не изменилась

[рони]

ufaclub,
убрать из кнопок вызов модального окна -- установить клик на саму кнопку -- в конец success добавить вызов модального окна, всё.

[рони]

ufaclub,
примерно так ... детали уточните по месту.

<a class="btn-modal-catalog-item"  data-catalog-item-id="26">

тут содержание блока

</a>
 <script>
        $(window).on('load', function() {
            $('[data-catalog-item-id]').on('click', function(event) {
                event.preventDefault();
                var $modal = $('.modal-catalog-item'),
                    $btn = $(this);
                var id = $btn.data('catalog-item-id');
                $.ajax({
                    url: '/inc/catalog/item.php',
                    method: 'GET',
                    data: {
                        'id': id
                    },
                    success: function(response) {
                        $modal.find('.modal-body').html(response);
                        $modal.find('.modal-title').html($(".origtitle").html());
                        $modal.find('.carousel').each(function() {
                            new bootstrap.Carousel(this);
                        });
                        $('.modal-catalog-item').on('shown.bs.modal', function(e) {
                            var $modal = $(this);
                            $modal.find('.modal-catalog-item-slider-main').slick({
                                slidesToShow: 1,
                                slidesToScroll: 1,
                                arrows: false,
                                asNavFor: '.modal-catalog-item-slider-nav',
                                lazyLoad: 'ondemand',
                                infinite: false,
                                swipe: false
                            });
                        });
                       $modal.modal("show");
                    }
                });
            });
        });
    </script>

[ufaclub]

Спасибо! прям все в точку как хотел теперь работает. поражает ваш уровень знаний и умений!