Jquery提示框效果（确认提示框）

最新推荐文章于 2024-04-19 10:03:14 发布

酷jjs

最新推荐文章于 2024-04-19 10:03:14 发布

阅读量8.7k

点赞数

分类专栏：前端笔记 jquery 文章标签： jquery 提示框

本文链接：https://blog.csdn.net/qq_32584661/article/details/53301174

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

jquery

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通提示框和确认提示框</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        /***** 遮罩 *****/
        /* .mask{background:rgba(0,0,0,0.2); width:100%; height:100%;position:fixed;top:0;left:0;
        background:url("${pageContext.request.contextPath}/images_/mask.png")\9;z-index:999;} */
        .mask_box{width:100%; height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0.2);
            width:100%; height:100%;background:url("img/mask.png")\9;
            z-index:999;}

        /***** 提示框 *****/
        /* .prompt_box{width:400px;height:200px;background:#ffffff;border-radius:6px;
            position:fixed;top:50%; left:50%; margin-left:-200px;margin-top:-100px;overflow:hidden;} */
        .prompt_box{width:400px;height:200px;background:#ffffff;border-radius:6px;
            position:absolute;top:50%; left:50%; margin-left:-200px;margin-top:-100px;overflow:hidden;}
        .prompt_box .prompt_title{height:40px;padding-left:20px;border-bottom:2px solid #096075;background:#e6e6e6;position: relative;}
        .prompt_box .prompt_title h3{font-size:16px;color:#096075;margin-top:0;line-height:40px;}
        .prompt_box .prompt_cancel{width:24px;height:24px;cursor: pointer;
            background: url("img/cancel.png") no-repeat;
            position: absolute;right:0;top:0;}

        .prompt_box .prompt_cont{position: relative;height:158px;}
        .prompt_box .prompt_cont .prompt_text{line-height:140px;text-align:center;}
        .prompt_box .prompt_cont .prompt_sure,.prompt_box .prompt_cont .prompt_no,.prompt_box .prompt_cont .prompt_ok{position: absolute;bottom:20px;
            width:50px;height: 26px;border-radius:5px;color:#ffffff;
            font-size: 14px;line-height:26px;text-align:center;cursor: pointer;}
        .prompt_box .prompt_cont .prompt_sure,.prompt_box .prompt_cont .prompt_ok{background:#1a9ebf;right:20px;}
        .prompt_box .prompt_cont .prompt_no{background:#cccccc;right:90px;color:#1a1a1a;}

        .hide{display:none;}
        .show{display:block;}
    </style>
</head>
<body>



<div class="mask_box hide">

    <div class="mask">
        <div class="prompt_box">
            <div class="prompt_title">
                <h3>提示</h3>
                <span class="prompt_cancel"></span>                       <!-- 关闭提示，取消按钮 -->
            </div>
            <div class="prompt_cont">
                <p class="prompt_text prompt_out_text">输入有误，请重新输入！</p>
                <span class="prompt_no prompt_out_no hide">取消</span>           <!-- 关闭提示，取消按钮 -->
                <span class="prompt_sure">确定</span>                 <!--  关闭提示，取消按钮     -->
                <span class="prompt_ok hide">确定</span>            <!--    确认提示：确定执行按钮 -->
            </div>
        </div>
    </div>




</div>



<input type="button" value="确认提示框" class="btn" style=" margin:100px;">


<script type="text/javascript">

$(function(){


    /*弹出确认提示框*/
    $('.btn').click(function () {
        promptSure();
        $('.prompt_text').text('确认关闭改提示框吗？');
    });

    /*弹出确认确认按钮*/
    $('.prompt_ok').click(function(){

        /*关闭确认提示框*/
        $(this).parents('.mask_box').addClass('hide');
        /*弹出普通提示框*/
        prompt();
        $('.prompt_text').text('提示框已关闭!');


    })

    promptClose();  //提示关闭


})



    /* 提示框显示 */
    function prompt(){
        $('.prompt_no').addClass('hide');
        $('.prompt_ok').addClass('hide');
        $('.prompt_sure').removeClass('hide');
        $('.mask_box').removeClass('hide');
    }
    /* 确认框显示 */
    function promptSure(){
        $('.prompt_no').removeClass('hide');
        $('.prompt_ok').removeClass('hide');
        $('.prompt_sure').addClass('hide');
        $('.mask_box').removeClass('hide');
    }

    /* 提示框关闭*/
    function promptClose(){
        $('.prompt_no,.prompt_sure,.prompt_cancel').click(function () {
            $(this).parents('.mask_box').addClass('hide');
        });
    }




</script>

</body>
</html>

效果图显示：

这里写图片描述

酷jjs

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Jquery提示框效果（确认提示框）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>普通提示框和确认提示框</title> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{margin: 0;padding
复制链接

扫一扫