前端网页开发实现页面提示弹窗效果

网页前端外包开发流程图|网页开发前端与后端接口|网页设计与前端开发 素材文件

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>网页开发前端占比:弹窗效果</title>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.2.js”></script>
    <script>
        $(function () {
/**
* 代替alert弹窗提示方法
* @param width 弹窗div的宽
* @param alertcontent 弹窗内容
*/
            function show_alert(width, alertcontent) {
                var boarddiv = “<div id=’promptalert’ style=’width:200px;height: 30px;background-color: #fd4c5d;text-align: center;line-height: 30px;position: fixed;top:-30px;margin: 0 auto;z-index: 9999′><span class=’alert-content’ style=’color: #FFFFFF;font-size: 14px;’>添加成功!</span></div>”;
                $(document.body).append(boarddiv); //生成显示的div
                var window_width = ($(window).width()) / 2; //页面宽度的50%
                var promptalert_width = ($(“#promptalert”).width()) / 2; //div宽度的50%
                var position_left = window_width – promptalert_width; //position定位left的值,实现不管div多宽都水平居中
                $(“#promptalert”).css({ “width”: width });
                $(“#promptalert”).css({ “left”: position_left });
                $(“#promptalert .alert-content”).html(alertcontent);
                $(“#promptalert”).animate({
                    top: ’15px’
                });
                setTimeout(function () {
                    $(“#promptalert”).animate({
                        top: ‘-30px’
                    });
                }, 2000);//2秒后执行该方法
            }
            $(“a”).click(function () {
                show_alert(“300px”, “winter is coming ╮( ̄▽ ̄)╭”);
            });
        })
    </script>
</head>
<body>
    <a style=”cursor: pointer”>点我点我(=・ω・=)</a>
</body>
</html>

前端开发比网页制作|网页前端开发技术|炫酷的前端开发网页作品

» 本文来自:前端开发者 » 《前端网页开发实现页面提示弹窗效果》
» 本文链接地址:https://www.rokub.com/4452.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!