html生命周期初次应用

需求：在一个页面加载完成后，自动弹出一个信息框

主要内容：

1.自定义弹框代码

<div class="alertmes" id="aa" style="display:none;">

        <div class="am-wrapper">

            <div class="am-title">

                <b>这是标题</b>

            </div>

            <div class="am-mes">这是文本内容

            </div>

            <div class="am-btn">

                <input type="button" value="确定" class="btn am-confirm-btn" />

            </div>

        </div>

    </div>

2.弹框css样式

 <style>

        /*alertmes*/

        .alertmes {

            position: fixed;

            top: 0;

            right: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.3);

            overflow: hidden;

            /* display: none; */

        }

        .am-wrapper {

            width: 90%;

            margin: 200px auto 0;

            max-width: 600px;

            padding: 20px;

            box-sizing: border-box;

            background-color: #fff;

            border: 1px solid #ddd;

            border-radius: 4px;

            box-shadow: 0 0 5px #ddd;

        }

        .am-title {

            font-size: 17px;

        }

        .am-mes {

            font-size: 15px;

            height: 22rem;

            overflow: auto;

            margin: 10px 0 30px;

        }

        .am-btn {

            text-align: right;

        }

        input.btn {

            border: none;

            padding: 5px 10px;

            background-color: #0b6a9e;

            color: #fff;

            border-radius: 4px;

            outline: none;

        }

        .am-cancel-btn {

            background-color: #ddd;

        }

    </style>

3.js代码（先引用jquery）

window.onload = function() {

        var oScore = document.getElementById('aa');

        oScore.style.display = 'block';

    }

$(".am-confirm-btn").click(function() {

            $(".alertmes").hide()

 })

个人用在登陆页面，当用户输入网址页面加载完成后，自动弹出提示框，点击确定即可关闭，再进行登录操作。