非常棒一jquery弹框插件

  • N3_665894
    了解作者
  • 43.5KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-13 17:55
    上传日期
一款非常不错的基于jquery的弹出层插件
jquery弹出层插件多种动画效果弹出遮罩层.rar
  • css
  • animate.min.css
    54.6KB
  • common.css
    3KB
  • index.html
    11.3KB
  • js
  • jquery.min.js
    90.8KB
  • jquery.hDialog.js
    9.2KB
内容介绍
 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telephone=no,email=no" name="format-detection"> <meta name="author" content="haibao"/> <meta name="url" content="http://www.jqueryfuns.com/"/> <meta name="keywords" content="jquery,css3,表单,弹出层,插件"/> <meta name="description" content="jQuery+Css3 多功能表单弹出层插件"/> <link rel="stylesheet" href="css/common.css"/><!-- 基本样式 --> <link rel="stylesheet" href="css/animate.min.css"/> <!-- 动画效果 --> <title>jQuery+Css3 多功能表单弹出层插件</title> </head> <body> <div id="wrapper"> <header><h2>jQuery+Css3 多功能表单弹出层插件 </h2></header> <div class="box"> <div class="demo"> <h3>&gt; 下列需要引入animate.min.css动画库:</h3> <div class="example"> <a href="javascript:;" class="bounceIn dialog" rel='nofollow' onclick='return false;'>bounceIn动画</a> <a href="javascript:;" class="bounceInDown dialog" rel='nofollow' onclick='return false;'>bounceInDown动画</a> <a href="javascript:;" class="bounceInLeft dialog" rel='nofollow' onclick='return false;'>bounceInLeft动画</a> <a href="javascript:;" class="bounceInRight dialog" rel='nofollow' onclick='return false;'>bounceInRight动画</a> <a href="javascript:;" class="bounceInUp dialog" rel='nofollow' onclick='return false;'>bounceInUp动画</a> <a href="javascript:;" class="rollIn dialog" rel='nofollow' onclick='return false;'>rollIn动画</a> <a href="javascript:;" class="fadeIn dialog" rel='nofollow' onclick='return false;'>fadeIn动画</a> <a href="javascript:;" class="fadeInUpBig dialog" rel='nofollow' onclick='return false;'>fadeInUpBig动画</a> <a href="javascript:;" class="lightSpeedIn dialog" rel='nofollow' onclick='return false;'>lightSpeedIn动画</a> <a href="javascript:;" class="flipInX dialog" rel='nofollow' onclick='return false;'>flipInX动画</a> <a href="javascript:;" class="rotateInDownLeft dialog" rel='nofollow' onclick='return false;'>rotateInDownLeft动画</a> <a href="javascript:;" class="rotateInDownRight dialog" rel='nofollow' onclick='return false;'>rotateInDownRight动画</a> <a href="javascript:;" class="rotateInUpLeft dialog" rel='nofollow' onclick='return false;'>rotateInUpLeft动画</a> <a href="javascript:;" class="rotateInUpRight dialog" rel='nofollow' onclick='return false;'>rotateInUpRight动画</a> <a href="javascript:;" class="rubberBand dialog" rel='nofollow' onclick='return false;'>rubberBand动画</a> <a href="javascript:;" class="zoomIn dialog" rel='nofollow' onclick='return false;'>zoomIn动画</a> <a href="javascript:;" class="zoomInDown dialog" rel='nofollow' onclick='return false;'>zoomInDown动画</a> <a href="javascript:;" class="zoomInLeft dialog" rel='nofollow' onclick='return false;'>zoomInLeft动画</a> <a href="javascript:;" class="zoomInRight dialog" rel='nofollow' onclick='return false;'>zoomInRight动画</a> <a href="javascript:;" class="zoomInUp dialog" rel='nofollow' onclick='return false;'>zoomInUp动画</a> </div> <h3>&gt; 表单示例:</h3> <div class="example"> <a href="javascript:;" class="demo0" rel='nofollow' onclick='return false;'>带标题的</a> <a href="javascript:;" class="demo16" rel='nofollow' onclick='return false;'>淡出关闭效果</a> <a href="javascript:;" class="demo1" rel='nofollow' onclick='return false;'>改变宽度</a> <a href="javascript:;" class="demo2" rel='nofollow' onclick='return false;'>改变高度</a> <a href="javascript:;" class="demo3" rel='nofollow' onclick='return false;'>改变宽和高</a> <a href="javascript:;" class="demo4" rel='nofollow' onclick='return false;'>改变位置</a> <a href="javascript:;" class="demo14" rel='nofollow' onclick='return false;'>显示前回调</a> <a href="javascript:;" class="demo15" rel='nofollow' onclick='return false;'>隐藏后回调</a> <a href="javascript:;" class="demo5" rel='nofollow' onclick='return false;'>不重置表单</a> <a href="javascript:;" class="demo6" rel='nofollow' onclick='return false;'>遮罩不可点击关闭</a> <a href="javascript:;" class="demo7" rel='nofollow' onclick='return false;'>改变弹框背景色</a> <a href="javascript:;" class="demo8" rel='nofollow' onclick='return false;'>改变遮罩背景色</a> <a href="javascript:;" class="demo9" rel='nofollow' onclick='return false;'>改变关闭按钮背景色</a> <a href="javascript:;" class="demo18" rel='nofollow' onclick='return false;'>不显示关闭按钮</a> <a href="javascript:;" class="demo10" rel='nofollow' onclick='return false;'>错误提示</a> <a href="javascript:;" class="demo11" rel='nofollow' onclick='return false;'>正确提示</a> <a href="javascript:;" class="demo12" rel='nofollow' onclick='return false;'>显示加载</a> <a href="javascript:;" class="demo13" rel='nofollow' onclick='return false;'>移除加载</a> <a href="javascript:;" class="demo17 bounceIn" rel='nofollow' onclick='return false;'>鼠标放这触发</a> </div> <div class="desc"> <h3>使用说明:</h3> <pre> /* * 看了下面的调用示例,你就可以自定义弹框了哦。 * - $(element).hDialog(); //默认调用弹框; * - $(element).hDialog({box: '#demo'}); //自定义弹框容器ID/Class; * - $(element).hDialog({boxBg: '#eeeeee'}); //自定义弹框容器背景; * - $(element).hDialog({modalBg: '#eeeeee'}); //自定义遮罩背景颜色; * - $(element).hDialog({closeBg: '#eeeeee'}); //自定义关闭按钮背景颜色; * - $(element).hDialog({width: 500}); //自定义弹框宽度; * - $(element).hDialog({height: 400}); //自定义弹框高度; * - $(element).hDialog({position: 'top'}); //top:弹框顶部居中,center:绝对居中,left:顶部居左; * - $(element).hDialog({triggerEvent: 'mouseenter'}); //弹框触发方式; * - $(element).hDialog({effect: 'fadeOut'}); //弹框关闭效果; * - $(element).hDialog({closeHide: false}); //是否隐藏关闭按钮(默认true:不隐藏,false:隐藏) * - $(element).hDialog({resetForm: false}); //false:不重置表单,反之重置; * - $(element).hDialog({modalHide: false}); //false:点击遮罩背景不关闭弹框,反之关闭; * - $(element).hDialog({escHide: false}); //false:按ESC不关闭弹框,反之关闭; * * 也可以这样: * - $(element).hDialog({ * box: '#demo', * boxBg: '#eeeeee', * modalBg: '#eeeeee', * closeBg: 'rgba(0,0,0,0.6)', * width: 500, * height: 400, * positions: 'top', * triggerEvent: 'mouseenter', * effect: 'hide', * closeHide: false, * resetForm: false, * modalHide: false, * escHide: false, * beforeShow: function(){ alert('执行回调'); }, * afterHide: function(){ alert('执行回调'); } * }); * * 下面是简单的扩展方法(以后再慢慢补充吧): * - $.tooltip('错误提示文字'); 或者 $.tooltip('正确提示文字',4000,true); //内置2种提示风格(参数1为提示文字,参数2为自动关闭时间,参数3:true为正确,false为错误) * - $.showLoading('正在加载...',100,30); 或者 $.hideLoading(); //显示/移除加载(参数1为说明文字,参数2为宽度,参数3为高度,默认宽高为90*30,可不填写) * - $.goTop(); //返回顶部,(参数1:和屏幕底部的距离,参数2:和屏幕右侧的距离; PS:自定义一定要加单位,比如px,em, 也可以是百分比哦) */ </pre> </div> </div><!-- demo end --> <!-- 注意:请将要放入弹框的内容放在比如id="HBox"的容器中,然后将box的值换成该ID即可,比如:$(element).hDialog({'box':'#HBox'}); --> <div id="HBox"> <form action="" method="post" onsubmit="return false;"> <ul class="list"> <li> <strong>昵 称 <font color="#ff0000">*</font></strong> <div class="fl"><input type="text" name="nickname" value="" class="ipt nickname" /></div> </li> <li> <strong>手 机 <font color="#ff0000">*</font></strong> <div class="fl"><input type="text" name="phone" value="" class="ipt phone" /></div> </li> <li> <strong>邮 箱 <font color="#ff0000">*</font></strong> <div class="fl"><input type="text" name="email" value="" class="ipt email" /></div> </li> <li> <strong>性 别 <font color="#ff0000">&nbsp;</font></strong> <div class="fl"> <label class="mr10"><input type="radio" name="sex" value="1"/>男</label> <label class="mr10"><input type="radio" name="sex" value="2"/>女</label> <label><input type="radio" name="sex" value="3"/>保密</label> </div>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询