jQuery 프런트엔드 프레임워크 easyui가 Dialog_jquery를 사용할 때의 버그 처리

최근 easyui 프론트엔드 프레임워크를 사용해 UI를 개발하고 디자인하고 있는데, Dialog를 사용할 때 페이지 내용이 많으면 문제가 발생한다는 걸 알았습니다. 먼저 원본 코드를 살펴보세요. :

코드 복사 코드는 다음과 같습니다. 결과를 확인하려면 선택하세요:

성공 실패함 $("#confirmd").dialog({ 제목: '예약 확인', iconCls: 'icon-save', 크기 조정 가능: false, modal: true, 닫힘: true, 너비: 200, 높이: 200, 버튼: [{ 텍스트: '제출', 핸들러: 함수 () { 경고("확인"); } }, { text: '취소', 핸들러: 함수 () { $("#confirmd").dialog("close"); } }] }); 함수 openconfirmDlg() { $("#confirmd").dialog("열기"); }

[예약 확인] 버튼을 클릭하면 다음과 같은 대화 상자가 열립니다.

몇 가지 문제를 볼 수 있습니다. 하나는 마스크 레이어가 웹 페이지의 내용을 완전히 덮지 않는다는 것입니다. 다른 하나는 대화 상자가 물론 누락된 것은 아니지만 에 표시됩니다. 페이지 상단에서 스크롤 막대를 뒤로 드래그해야 합니다. 항목 끝에서 그 이유를 알 수 있습니다. 첫째, 웹 페이지 콘텐츠의 높이만 올바르지 않습니다. 창(즉, 시각적 높이)을 얻었고 마스크가 불완전합니다. 둘째, 위치가 잘못되었습니다. 스크롤탑이 올바르게 인식되지 않아 대화 상자의 위치가 부정확해졌습니다. 해당 문제를 해결하기 위해 개선된 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 결과를 확인하려면 선택하세요:

성공 실패함 $("#confirmd").dialog({ 제목: '예약 확인', iconCls: 'icon-save', 크기 조정 가능: false, modal: true, 닫힘: true, 너비: 200, 높이: 200, 버튼: [{ 텍스트: '제출', 핸들러: 함수 () { 경고("확인"); } }, { text: '취소', 핸들러: 함수 () { $("#confirmd").dialog("close"); } }] }); Window.onscroll = 함수() { $("#confirmd").dialog("move", { top: $(document).scrollTop() ($(window).height() - 200) * 0.5 }); } 함수 openconfirmDlg() { $("#confirmd").dialog("열기"); $("#confirmd").dialog("move", { top: $(document).scrollTop() ($(window).height() - 200) * 0.5 }); $(".window-mask").css({ 높이: $(document).height()}); }

이제 대화 상자를 여는 것이 정상이며 효과는 다음과 같습니다. 스크롤을 해도 항상 웹페이지 중앙에 머물 수 있습니다. 효과는 다음과 같습니다.

위 효과를 보장하는 키 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $("#confirmd").dialog("move", { top: $(document).scrollTop() ($(window).height() - 200) * 0.5 }) //현재 콘텐츠 페이지로 이동 중간 $(".window-mask").css({ height: $(document).height()}); //마스크 레이어의 높이를 웹페이지 콘텐츠의 높이로 조정

테스트해보고 이전보다 훨씬 사용하기 쉬운지 확인해 보겠습니다. 대부분의 브라우저에서 테스트해 보았는데, 빠진 부분이 있으면 메시지를 남겨주시면 이 코드가 계속 진행됩니다. 업데이트됩니다.