사용자가 두 개의 동일한 Boostrap 대화 상자가 두 번 열리지 않도록하려면?

Question

ajax가 대화 상자를로드하는 데 시간이 걸리고 사용자가 버튼을 두 번 클릭하면 두 개의 동일한 대화 상자가 화면에 표시됩니다. 나는 그것이 일어나지 않도록하고 싶다.

$("#ShowUpCallTag").on('click', function (e) { 
     $.ajax({ 
      url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
      type: 'get', 
      datatype: 'json' 
     }).done(function (data) { 
      var dialog = main.ship.calltags.dialog.buildDialog(data); 
      dialog.open(); 
     }); 
    }); 

Answer 1

귀하의 코드에있는 문제는 대화 상자가 열려 있는지 여부를 알 수 없다는 것입니다. 내가 할 것이 무엇 : 당신의 클릭 핸들러 함수에서 var dialogOpened = false

당신의 done(function (data) {}) 콜백에서 경우에만 dialogOpened === false

을 AJAX 호출을 수행

1. 는 예를 들어, jQuery를 호출보다 동일한 범위에서 변수 만들기 dialogOpened을 true로 설정하고 부트 스트랩 생성 이벤트를 수신하여 사용자가 모달을 닫은 시점을 확인하십시오 (Bootstrap Modal Events 참조)
2. 모달이 닫히면 dialogOpened을 false로 설정하십시오.
3. 나는 또한 좋은 습관이라고 생각합니다 : 클릭 한 번 클릭하는 요소가 버튼 인 경우 사용자가 클릭 한 직후 비활성화 할 수 있습니다.

Answer 2

  var isModelDialogOpen = false; 
      $("#ShowUpCallTag").on('click', function (e) { 
      if (isModelDialogOpen == false) { 
       isModelDialogOpen = true; 

       //Popup call tag dialog. 
       $.ajax({ 
        url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
        type: 'get', 
        datatype: 'json' 
        .done(function (data) { 
         var dialog = main.ship.calltags.dialog.buildDialog(data); 
         dialog.open(); 
        }) 
        .always(function (data) { 

         isModelDialogOpen = false; 
        }); 
      } 
     });