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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery实现广告上下滚动效果
Mar 04 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js中this的用法实例分析
2015/01/10 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js时间控件只显示年月
2017/01/08 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
python复制文件代码实现
2013/12/23 Python
Python去掉字符串中空格的方法
2014/03/11 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python生成随机数组的方法小结
2017/04/15 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python元组常见操作示例
2019/02/19 Python
意大利男装网店:Vrients
2019/05/02 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
财务总经理岗位职责
2014/02/16 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
Python字典的基础操作
2021/11/01 Python
Python实现数据的序列化操作详解
2022/07/07 Python