(function () {$.MsgBox = {Alert: function (title, msg) {GenerateHtml("alert", title, msg);btnOk(); //alert只是弹出消息,因此没必要用到回调函数callbackbtnNo();},Confirm: function (title, msg, callback) {GenerateHtml("confirm", title, msg);btnOk(callback);btnNo();}}//生成Htmlvar GenerateHtml = function (type, title, msg) {var _html = "";_html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';_html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';if (type == "alert") {_html += '<input id="mb_btn_ok" type="button" value="确定" />';}if (type == "confirm") {_html += '<input id="mb_btn_ok" type="button" value="确定" />';_html += '<input id="mb_btn_no" type="button" value="取消" />';}_html += '</div></div>';//必须先将_html添加到body,再设置Css样式$("body").append(_html); GenerateCss();}//生成Cssvar GenerateCss = function () {$("#mb_box").css({width: '100%', height: '100%', zIndex: '99999', position: 'fixed',filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'});$("#mb_con").css({zIndex: '999999', width: '70%', position: 'fixed',backgroundColor: 'White', borderRadius: '15px'});$("#mb_tit").css({display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',borderBottom: '3px solid #009BFE', fontWeight: 'bold'});$("#mb_msg").css({padding: '20px', lineHeight: '20px',borderBottom: '1px dashed #DDD', fontSize: '13px'});$("#mb_ico").css({display: 'block', position: 'absolute', right: '10px', top: '9px',border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'});$("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });$("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });$("#mb_btn_ok").css({ backgroundColor: '#168bbb' });$("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });//右上角关闭按钮hover样式$("#mb_ico").hover(function () {$(this).css({ backgroundColor: 'Red', color: 'White' });}, function () {$(this).css({ backgroundColor: '#DDD', color: 'black' });});var _widht = document.documentElement.clientWidth; //屏幕宽var _height = document.documentElement.clientHeight; //屏幕高var boxWidth = $("#mb_con").width();var boxHeight = $("#mb_con").height();//让提示框居中$("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });}//确定按钮事件var btnOk = function (callback) {$("#mb_btn_ok").click(function () {$("#mb_box,#mb_con").remove();if (typeof (callback) == 'function') {callback();}});}//取消按钮事件var btnNo = function () {$("#mb_btn_no,#mb_ico").click(function () {$("#mb_box,#mb_con").remove();});}})();

  

转载于:https://www.cnblogs.com/fierceeagle/p/4708188.html

jquery扩展提示框相关推荐

  1. java提示框easyui风格_[Java教程]jQuery EasyUI 提示框(Messager)用法

    [Java教程]jQuery EasyUI 提示框(Messager)用法 0 2013-10-10 19:00:06 jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的 ...

  2. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  3. 在指定位置上方出现通用jquery悬浮提示框插件全站通用

    工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链 ...

  4. php jquery 弹窗提示框,jQuery实现消息弹出框效果

    本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下 效果图 实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...

  5. jquery文字提示框

    使用jquery为table的某一个td添加文字提示框,鼠标滑入出现,鼠标滑出消失 html //因为tbody的内容是后来添加的,所以可以直接根据table来找到要加效果的td元素//如果html中 ...

  6. jquery tip提示框

    先看下效果: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. jquery中提示框layer.msg()设置时间及相关用法

    效果 我觉得比alert提示框好用,好看 实现代码 //eg1 layer.msg('只想弱弱提示'); //eg2 layer.msg('有表情地提示', {icon: 6}); //eg3 lay ...

  8. (转)基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化...

    http://www.cnblogs.com/wuhuacong/p/4775282.html 在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验 ...

  9. 15个友好的jQuery 提示框插件

    需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失. 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,今 ...

  10. bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

    表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名 描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...

最新文章

  1. 那些轻轻拍了拍Attention的后浪们
  2. 干货丨机器学习傻瓜指南
  3. 疫情期间在公共场所要全程佩戴口罩,不要抱有侥幸心理
  4. python自动化开发教程_Python自动化开发实战视频课程-全新基础篇_Python教程
  5. sqlserver 还原bak文件 查看不到_SQL server中用T-SQL语句实现(建库,分离,附加,备份,还原)...
  6. 安装mysql 5.1 详细步骤
  7. 老罗直播原定的12台半价哈弗F7仅售4台就下架?官方回应来了
  8. jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖
  9. Kubernetes详解(九)——资源配置清单创建Pod实战
  10. 网络营销教程—SEO 第五章 单面页最佳优化
  11. oracle当天是这个月的第几周,oracle_oracle查看当前日期是第几个星期的方法,系统当前时间是多少周,就是 - phpStudy...
  12. 使用J-Link打印日志——SEGGER Real-Time Transfer(RTT)工具的移植使用
  13. 浅谈被动式IAST产品与技术实现
  14. 信息收集--wmic命令
  15. sklearn中的make_blobs
  16. sony android mp3播放器,高音质与流媒体兼具,索尼 NW-ZX500 安卓音乐播放器评测
  17. Vue页面实现打印功能
  18. “用户名不在 sudoers文件中,此事将被报告” 解决方法
  19. pycharm使用eval reset不能重置
  20. 【牛客网】---多态经典选择题

热门文章

  1. 番茄花园 Ghost XP SP3 极速装机版 V2013.05
  2. 从游戏谈起——论主动性和责任心
  3. 无法在web 服务器上启动调试。打开的url的iis辅助进程当前没有运行
  4. CentOS Apache服务器配置https
  5. Java到底如何更优雅的处理空值?
  6. 猪年适合学什么编程语言?
  7. python求解微分方程组_用python解一阶微分方程组
  8. Linux进阶之给nginx设置登录用户验证
  9. 【持久层】Druid简介
  10. luoguP3600 随机数生成器 期望概率DP + DP优化