模态框弹窗示例-优快云博客

本文链接：https://blog.youkuaiyun.com/k_runtu/article/details/80861715

`代码`

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<style>
.modal-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.modal-mask {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
}
.modal-alert {
    margin: 0 auto;
    width: 200px;
    opacity: 1;
}
.modal-title {
    text-align: center;
    font-size: 27px;
    background: lightblue;
}
.modal-message {
    padding: 10px 5px;
    background: white;
}
.modal-button {
    width: 100%;
    height: 100%;
    font-size: 22px;
}
.vertical-center {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="modal-container modal-remove">
    <div class="modal-mask"> </div>
    <div class="modal-alert vertical-center">
        <div class="modal-title title">title</div>
        <div class="modal-message">message</div>
        <div class="modal-control">
            <button class="modal-button" type="button" name="button">ok</button>
        </div>
    </div>
</div>
</body>
<script>
    $('.modal-button').on('click', function() {
        console.log('click ok');
        $('.modal-remove').remove();
    })
</script>
</html>