jquery 弹出层

所属分类:UI-弹出层

 97199  717  查看评论 (60)
分享到微信朋友圈
X
jquery 弹出层 ie兼容8

使用说明:

	/*
	 * 看了下面的调用示例,你就可以自定义弹框了哦。
	 *          - $(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, 也可以是百分比哦)

相关插件-弹出层

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 40340  409

表格鼠标移入同行同列变色(原创)

jQuery表格鼠标移入后同行同列变色
  弹出层
 25949  320

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 50551  576

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 32304  387

讨论这个项目(60)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    yuanhai123456 0
    2019/8/21 16:46:55
    7:397 Uncaught TypeError: $el.hDialog is not a function
        at HTMLDocument. (7:397)
        at c (jquery.min.js:4)
        at Object.fireWith [as resolveWith] (jquery.min.js:4)
        at Function.ready (jquery.min.js:4)
        at HTMLDocument.q (jquery.min.js:4)

    我不是前端,我单独拿出来能使用,我在框架里引入这个插件报错,点击也不出弹窗,求解

        西瓜0
        2019/8/21 17:22:36

        这是个低级问题,选调用jquery在调用jquery.hDialog.js你顺序错了。

        <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
        <script src="js/jquery.hDialog.js"></script>	
    回复
    木头 0
    2018/12/14 17:01:13
    Master 0
    2018/10/17 11:24:07
    ?????○????? 0
    2018/6/14 17:23:50
    哥们 你这个表单默认创建form,如果form作为上传功能的话 应该怎么解决啊? 回复
    njsaviour 0
    2018/6/9 17:05:46
    貌似不能弹出html页面和弹出层不能拖动,有这两个就好了! 回复
    |.逍遥ギ¤沉默∮ 0
    2018/5/11 15:42:50
    貌似不能弹出html页面和弹出层不能拖动,有这两个就好了! 回复
    TzzHmm 0
    2018/4/3 16:30:29
    一个页面可不可以多次调用呢 回复
    萌新小白 0
    2018/1/17 15:33:31

    我是刚学不久的新手,有没有大佬教我怎么用啊。

        0
        2018/6/10 14:28:21
        想怎么用怎么用
    回复
    dany828 0
    2017/12/21 14:31:12
    934142500 0
    2017/11/27 16:10:54

    $('.dialog').hDialog('close',{box:'#HBox'});楼主,这样并不能关闭弹出框??????

        跳跃的精灵1
        2019/6/5 20:27:51
        改成$("#HCloseBtn").click();就可以了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复