验证提示框封装

最新推荐文章于 2022-05-06 23:38:10 发布

转载最新推荐文章于 2022-05-06 23:38:10 发布 · 128 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b402478f265da0fb0184fbb

{{--提示框--}}
//css代码
.cyy_prop{
    z-index: 55555;
    display:none;
    background: rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:absolute;
    top: 0;
    left: 0;
}
#cyy_ok{
    z-index: 2222;
    display:none;
    background: #EEEEEE;
    width:335px;
    height:167px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-167px;
    margin-top:-83px;
    border-radius:6px;
}
#cyy_ok #cyy_close{
    position:absolute;
    left:310px;
    top:7px;
    font-size:17px;
    cursor:pointer;
    color: #fff;
}
#cyy_info{
    display: block;
    width: 335px;
    height: 40px;
    line-height: 40px;
    text-indent: 20px;
    color:#fff;
    background: #bf5329;
    font-size: 17px;
    border-radius: 6px 6px 0 0;
    text-indent:130px;
    cursor:pointer;
}
#cyy_myinfo{
    display: block;
    margin: 38px 0 0 0;
    font-size: 21px;
    color:#bf5329;
    width: 335px;
    text-align: center;
}
//html代码
<div class="cyy_prop">
    <div id="cyy_ok">
        <span id="cyy_info">输入提示</span>

        <span id="cyy_close">X</span>
    </div>
</div>

//js代码
//验证时只需要调用deal();

function deal(params){
    var texts = [
        '请填写名称',
        '请选择开始时间',
        '请选择结束时间',
        '结束时间必须大于开始时间',
        '请选择开始时间查询',
        '请选择结束时间查询',
        '查询结束时间必须大于开始时间',
        '请选择类别',
        '请选择开始站点', //8
        '请选择结束站点', //9
        '请选择线别',
        '请填写作业内容'

    ];
    anything(texts[params])
};
function anything(text){
    var lo =$("#cyy_ok");
    $(".cyy_prop").css('display','block');
    lo.css('display','block');
    $("#cyy_ok").children("#cyy_myinfo").html("");
    $("#cyy_ok").append("<SPAN id='cyy_myinfo'>" + text + "</SPAN>");
    $("#cyy_info,#cyy_close,.cyy_prop").click(function(){
        $(".cyy_prop").css('display','none');
        lo.css('display','none');
    })
}
复制代码

转载于:https://juejin.im/post/5b402478f265da0fb0184fbb