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

效果图显示：

Jquery提示框效果（确认提示框）相关推荐

html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
html border阴影效果_【开发小技巧】—如何使用HTML和CSS创建浮动框效果？
来源 | https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp 浮动框效 ...
html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...
html中文本框的透明度,jQuery实现textarea文本框半透明文本提示效果
jquery实现textarea文本框带有半透明文本提示效果: textarea文本框一般用于编辑大段的文本,比如编辑器或者简单的留言回复之类的功能,有的在textarea文本框的有默认的提示语言. ...
Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果
SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

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

Jquery提示框效果（确认提示框）相关推荐

最新文章

热门文章