コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > jsチュートリアル > jquery は美しいポップアップレイヤープロンプトメッセージを作成します Effects_jquery

jquery は美しいポップアップレイヤープロンプトメッセージを作成します Effects_jquery

WBOY

リリース： 2016-05-16 16:24:44

オリジナル

1407 人が閲覧しました

今日は、jquery に基づいたクールなポップアップレイヤープロンプトメッセージをお届けします。このサンプルページは、[実行] ボタンで初期化されます。 [実行] ボタンをクリックすると、プロンプトポップアップレイヤーがアニメーション化されます。レンダリングは次のとおりです:

実装コード。

HTML コード:

コードをコピーしますコードは次のとおりです:

<スクリプト>
$('#go').click(function () {
go(50);
});
$('#ok').click(function () {
go(500);
});
setTimeout(function() {
go(50);
}, 700);
setTimeout(function() {
go(500);
}、2000);
関数 go(nr) {
$('.bb').fadeToggle(200);
$('.message').toggleClass('comein');
$('.check').toggleClass('scaledown');
$('#go').fadeToggle(nr);
}
//@sourceURL=pen.js

CSSコード:

コードをコピー

コードは次のとおりです:

  本文、html

        {

            高さ: 100%;

            フォントサイズ: 20px;

            フォントファミリー: Source Sans Pro;

        }

        .b、.bb

        {

            位置: 絶対;

            幅: 100%;

            高さ: 100%;

            背景: url("kje4L5j.jpg");

            背景添付ファイル: 修正済み;

            背景サイズ: カバー;

            背景の位置: 中央;

        }

        .bb

        {

            背景: url("bDBs0et.jpg");

            背景添付ファイル: 修正済み;

            背景サイズ: カバー;

            背景の位置: 中央;

            表示: なし;

        }

        #行く

        {

            位置: 絶対;

            上: 30px;

            左: 50%;

            変換: 変換(-50%, 0%);

            色: 白;

            ボーダー: 0;

            背景: #71c341;

            幅: 100px;

            高さ: 30px;

            境界半径: 6px;

            フォントサイズ: 1rem;

            トランジション: バックグラウンド 0.2 秒のイーズ;

            概要: なし;

        }

        #go:ホバー

        {

            背景: #8ecf68;

        }

        #go:アクティブ

        {

            背景: #5a9f32;

        }

        .メッセージ

        {

            位置: 絶対;

            上: -200px;

            左: 50%;

            変換: 変換(-50%, 0%);

            幅: 300px;

            背景: 白;

            境界半径: 8px;

            パディング: 30px;

            text-align: 中央;

            フォントの太さ: 300;

            色: #2c2928;

            不透明度: 0;
            トランジション: トップ 0.3 秒 3 次ベジエ (0.31, 0.25, 0.5, 1.5)、不透明度 0.2 秒 イーズインアウト;

        }

        .メッセージ .check

        {

            位置: 絶対;

            上: 0;

            左: 50%;

            変換: 変換(-50%, -50%) スケール(4);

            幅: 120px;

            高さ: 110px;

            背景: #71c341;

            色: 白;

            フォントサイズ: 3.8rem;

            パディングトップ: 10px;

            境界半径: 50%;

            不透明度: 0;

            トランジション: 変換 0.2 秒 0.25 秒 3 次ベジェ(0.31, 0.25, 0.5, 1.5)、不透明度 0.1 秒 0.25 秒 イーズインアウト;

        }

        .メッセージ .スケールダウン

        {

            変換: 変換(-50%, -50%) スケール(1);

            不透明度: 1;

        }

        .message p

        {

            フォントサイズ: 1.1rem;

            マージン: 25px 0px;

            パディング: 0;

        }

        .message p:nth-child(2)

        {

            フォントサイズ: 2.3rem;

            マージン: 40px 0px 0px 0px;

        }

        .message #ok

        {

            位置: 相対;

            色: 白;

            ボーダー: 0;

            背景: #71c341;

            幅: 100%;

            高さ: 50px;

            境界半径: 6px;

            フォントサイズ: 1.2rem;

            トランジション: バックグラウンド 0.2 秒のイーズ;

            概要: なし;

        }

        .message #ok:hover

        {

            背景: #8ecf68;

        }

        .message #ok:active

        {

            背景: #5a9f32;

        }

        .comein

        {

            上: 150px;

            不透明度: 1;

        }