CSS를 사용하여 '로드 중입니다.'라는 프롬프트 상자를 생성합니다. . . . '예제 튜토리얼

최근 프로젝트 작업을 하다가 이런 요청을 받았습니다. 페이지에서 데이터가 느리게 로드되고 응답이 없습니다. 아래에서는 편집자가 CSS를 기반으로 '로드 중입니다.'라는 프롬프트 상자를 가져왔습니다. . . . . '기능, 필요한 친구가 참고하면 됩니다

요구사항:

가끔 데이터 로딩이 느리고 페이지가 응답하지 않으며 사용자가 계속 스크롤할 수 있으며 사용자 경험이 좋지 않습니다

해결책:

以 JS에 다음 코드를 추가하여 R

//提示信息  
function AddRunningp() {  
    $("<p class=\"datagrid-mask\"></p>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");  
    $("<p class=\"datagrid-mask-msg\"></p>").html("正在处理，请耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 });  
}  
//取消提示信息  
function MoveRunningp() {  
    $("p[class=&#39;datagrid-mask&#39;]").remove();  
    $("p[class=&#39;datagrid-mask-msg&#39;]").remove();  
}

Pooreee

를 호출하여 필요한 곳에 호출하세요.

효과는 다음과 같습니다. 전체 페이지를 편집할 수 없습니다.

                                         

위 내용은 CSS를 사용하여 '로드 중입니다.'라는 프롬프트 상자를 생성합니다. . . . '예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!