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 相关文章推荐
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jquery插件实现代码雨特效
Apr 24 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python docx库用法示例分析
2019/02/16 Python
六行python代码的爱心曲线详解
2019/05/17 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python上selenium的弹框操作实现
2020/07/13 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
军人违纪检讨书
2014/02/04 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
护士业务学习心得体会
2016/01/25 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python