プロンプトボックスを作成するCSS「読み込み中です。」 。 。 。 'チュートリアルの例

私は最近、プロジェクトに取り組んでいるときにそのような要求に遭遇しました。ページのデータの読み込みが遅く、応答がありませんでした。以下に、エディターが CSS に基づいた「読み込み中です。」というプロンプト ボックスを表示しました。 。 。 。 。 '機能、必要な友達はそれを参照できます

要件:

データの読み込みが時々遅く、ページが応答せず、ユーザーがスクロールし続ける可能性があり、ユーザーエクスペリエンスが良くありません

解決策:

必要に応じて 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

を呼び出す次のコードを JS に追加します。

影響は次のとおりです: ページ全体を編集できなくなります

以上がプロンプトボックスを作成するCSS「読み込み中です。」 。 。 。 'チュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。