jquery制作漂亮的弹出层提示消息特效

2020-05-22 17:11:41易采站长站整理

今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时,一个go按钮。当单击go按钮时,提示强出层以动画形式出现。效果图如下:

实现的代码。

html代码:


  <div class=’b’>
    </div>
    <div class=’bb’>
    </div>
    <button id=’go’>
        GO
    </button>
    <div class=’message’>
        <div class=’check’>
            ✔
        </div>
        <p>
            Success
        </p>
        <p>
            Check your email for a booking confirmation. We’ll see you soon!
        </p>
        <button id=’ok’>
            OK
        </button>
    </div>
    <script src=’jquery.js’></script>
    <script>
        $(‘#go’).click(function () {
            go(50);
        });
        $(‘#ok’).click(function () {
            go(500);
        });
        setTimeout(function () {
            go(50);
        }, 700);
        setTimeout(function () {
            go(500);
        }, 2000);
        function go(nr) {
            $(‘.bb’).fadeToggle(200);
            $(‘.message’).toggleClass(‘comein’);
            $(‘.check’).toggleClass(‘scaledown’);