ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで「読み込み中」プロンプトボックスを作成する

CSSで「読み込み中」プロンプトボックスを作成する

php中世界最好的语言
リリース: 2018-03-21 11:20:57
オリジナル
2157 人が閲覧しました

今回はCSSで「読み込み中」プロンプトボックスを作成する方法の注意事項をお送りします。実際の事例を見てみましょう。

要件:

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

解決策:

次のコードを js

//提示信息  
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='datagrid-mask']").remove();  
    $("p[class='datagrid-mask-msg']").remove();  
}
ログイン後にコピー

に追加するだけです必要なときに呼び出すだけです。

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

:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語ウェブサイトで!


推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

疑似要素::before および ::after の使用の詳細な説明

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート