信息提示框

发布时间：2020-04-07 05:45:16 作者：七彩极
来源：网络阅读：228

点击某按钮，提示某信息，相信大家经常遇到，用别人的插件总需要修改点，但是修改起来又很费时间，所以干脆自己写吧，哈哈。代码及效果如下：

信息提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信息提示框</title>
<style>
#full_screen_div{
    position: fixed;
    background: rgba(240,240,240,0.97);
    z-index: 3;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    font-size:10px;
}
#full_screen_div > #notice_box{
    background:#fff;
    position:relative;
    width:500px;
    height:200px;
    margin:0 auto;
    top:30%;
    border:1px solid #99CCFF;
    border-radius:5px;
    text-align:center;
}
#full_screen_div #notice_title{
    height:2em;
    background:#6699CC;
    font-size:2em;
    line-height:2em;
    text-align:left;
    padding-left:1em;
}

#full_screen_div #notice_content{
    height:5em;
    font-size:1.8em;
    line-height:2em;
    padding-top:0.5em;
    word-break:break-all;
    overflow: hidden;
}
#full_screen_div #notice_ok{
    width:80%;
    height:2em;
    text-align:center;
    margin:0 auto;
    background:#6699CC;
    color:#fff;
    font-size:2em;
    line-height:2em;
    border:1px solid #99CCFF;
    border-radius:5px;
}
</style>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){

    $('h2').click(function(){
        var txt = $(this).text();
        $('#notice_box > #notice_content').text(txt);
        $('#full_screen_div').fadeIn(100);

    });

    $('#full_screen_div #notice_ok').click(function(){
        $('#full_screen_div').fadeOut(10);
    });

});
</script>

</head>
<body>

<h2>提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息</h2>

<div id="full_screen_div">
    <div id="notice_box">
        <div id="notice_title">Notice :</div>
        <div id="notice_content">info...</div>
        <div id="notice_ok">OK</div>
    </div>
</div>

</body>
</html>

信息提示框

相关阅读