jquery实现弹窗(系统提示框)效果


Posted in jQuery onDecember 10, 2019

本文实例为大家分享了jquery实现系统提示框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="js/jquery-1.11.1.js"></script>
 <title>弹窗效果</title>
 <style>
  *{ margin: 0;padding: 0;list-style: none}

  .mask{background-color:rgba(0,0,0,0.2); width:100%; height:100%;position:fixed;top:0;left:0;}
  .prompt_box{width:400px;height:200px;background:#ffffff;border-radius:6px;
   position:fixed;top:25%; left:50%; margin-left:-200px;overflow: hidden;}
  .prompt_box .prompt_title{height:40px;line-height:40px;padding-left:20px;border-bottom:2px solid #1a9ebf;background:#e6e6e6;position: relative;}
  .prompt_box .prompt_title h3{font-size:16px;color: #333333; margin-top:0;}
  .prompt_box .prompt_cancel{width:24px;height:24px;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;padding-left:100px;}
  .prompt_box .prompt_cont .prompt_sure{position: absolute;right:20px;bottom:34px;
   width:50px;height: 26px;background:#1a9ebf;border-radius:5px;color:#ffffff;
   font-size: 14px;line-height:26px;text-align: center;}

  .hide{display:none;}
  .show{display:block;}

 </style>
</head>

<body>


<input type="button" value="按钮" id="btn">

<div class="mask hide">

 <div class="prompt_box">
  <div class="prompt_title">
   <h3>系统提示</h3>
   <span class="prompt_cancel"></span>
  </div>
  <div class="prompt_cont">
   <p class="prompt_text">输入有误,请重新输入!</p>
   <span class="prompt_sure">确定</span>
  </div>
 </div>

</div>

<script>
 $(function () {
  (function () {
   //////////////////////////弹窗效果////////////////////////////////
   $('#btn').click(function () {
    $('.prompt_text').text('输入有误,请重新输入!');
    $('.mask').removeClass('hide');
   })
   $('.prompt_sure,.prompt_cancel').click(function () {
    $('.mask').addClass('hide');
   })
  })();

 });
</script>
</body>
</html>

效果图显示:

jquery实现弹窗(系统提示框)效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
五步轻松实现zTree的使用
2017/11/01 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Vue中props的使用详解
2018/06/15 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python数据归一化及三种方法详解
2019/08/06 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
大学校运会广播稿
2014/02/03 职场文书
揠苗助长教学反思
2014/02/04 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
家长高考寄语
2015/02/27 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python