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.form.js的使用详解
Jun 14 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
如何在vue 中引入使用jquery
Nov 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
php 魔术函数使用说明
2010/02/21 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python实现桌面壁纸切换功能
2019/01/21 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Django models文件模型变更错误解决
2020/05/11 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
病媒生物防治方案
2014/05/13 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
团代会邀请函
2015/02/02 职场文书
关于python中模块和重载的问题
2021/11/02 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫