信息提示框

時間 2021-03-06

標籤 css html jquery bootstrap ide this 插件 code cdn htm 欄目 CSS 简体版

原文原文鏈接

點擊某按鈕，提示某信息，相信你們常常遇到，用別人的插件總須要修改點，可是修改起來又很費時間，因此乾脆本身寫吧，哈哈。代碼及效果以下：css

<!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(){

    $('h1').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>

<h1>提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息</h1>

<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>