脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery弹窗

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

 更新时间：2021年10月15日 10:40:26   作者：酷jjs  
这篇文章主要为大家详细介绍了jquery实现弹窗系统提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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回车实现登录简单实现

    实现登录的方法有很多，这里为大家介绍下实现回车提交表单，具体如下，感兴趣的朋友可以参考下
    2013-08-08
  • jQuery使用fadein方法实现渐出效果实例

    jQuery使用fadein方法实现渐出效果实例

    这篇文章主要介绍了jQuery使用fadein方法实现渐出效果的方法,以一个简单实例形式分析了jQuery中fadein方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery中获得$.ajax()事件返回的值并添加事件的方法

    jquery中获得$.ajax()事件返回的值并添加事件的方法

    如果想获得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想获得xx的值，要在script中，使用全局变量。利用全局变量引出xx的值。
    2010-04-04
  • jQuery文字横向滚动效果的实现代码

    jQuery文字横向滚动效果的实现代码

    下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery实现淡入淡出效果

    jQuery实现淡入淡出效果

    这篇文章主要为大家详细介绍了jQuery实现淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 基于jquery编写的横向自适应幻灯片切换特效的实例代码

    基于jquery编写的横向自适应幻灯片切换特效的实例代码

    全屏自适应jquery焦点图切换特效,在IE6这个浏览器兼容性问题上得到了和谐,兼容IE6,适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相关代码
    2013-08-08
  • jquery maxlength使用说明

    jquery maxlength使用说明

    在本教程中，我将告诉你如何使用一些常见的形式领域jquery.maxlength.js
    2011-09-09
  • 基于jQuery模拟实现淘宝购物车模块

    基于jQuery模拟实现淘宝购物车模块

    这篇文章主要介绍了如何利用jQuery+css+html模拟实现淘宝购物车模块，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下
    2022-03-03
  • jquery中post方法用法实例

    jquery中post方法用法实例

    这篇文章主要介绍了jquery中post方法用法,以实例的形式分析了post方法的具体用法,并对相关的知识点及注意点进行了较为深入的分析,需要的朋友可以参考下
    2014-10-10
  • jquery插件splitScren实现页面分屏切换模板特效

    jquery插件splitScren实现页面分屏切换模板特效

    这篇文章主要介绍了jquery插件splitScren实现页面分屏切换模板特效的相关资料,需要的朋友可以参考下
    2015-06-06

最新评论