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动态追加页面数据以及事件委托详解
May 06 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现上传文件进度条
Mar 26 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
PHP Token(令牌)设计
2008/03/15 PHP
php共享内存段示例分享
2014/01/20 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python批量图片处理简单示例
2019/08/06 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
初二生物教学反思
2014/02/03 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
给客户的感谢信
2015/01/21 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
德生2P3收音机开箱评测
2022/04/30 无线电